canvas的api小结

HTML

  <canvas id="canvas"></canvas>

Javascript

  var canvas=document.getElementById('canvas');

  canvas.width

  canvas.height

  var context=canvas.getContext("2d")

  //使用context进行绘制

  //画图线

  moveTo(x,y);

  lineTo(x,y);

  beginPath();

  closePath();

  //状态

  lineWidth  //线粗

  strokeStyle  //线颜色

  fillStyle  //封闭图形的填充颜色  

  //执行

  stroke();

  fill();

1.绘制矩形api

  rect(x,y,width,height)  //起始点坐标x,y 宽width 高height  (普通)

  fillRect(x,y,width,height)   //绘制填充矩形

  strokeRect(x,y,width,height)  //绘制带边框矩形

 2.线条属性

1.lineWidth 线宽

2.lineCap 线端点的形状

  lineCap=“butt”(default)折头

      “round”    圆头

      “square”’  方头

3.lineJoin 线段相交处

  lineJoin=“miter”(default)尖角  miterLimit(当尖角太锋利,导致内角外角定点相距超过miterLimit的长度,将自动转为“bevel”)

      “bevel”  折角

      “round” 圆角

3.图形变换

save()

restore()  //维持绘图的安全性

translate(x,y)   //平移

rotate(deg)  //旋转

scale(sx,sy)   //放缩

变换矩阵:

transform(a,b,c,d,e,f)

setTransform(a,b,c,d,e,f)

4.填充样式

1.fillStyle的值

fillStyle = color           颜色

    gradient    渐变

    image   图片

    canvas        画布

    video          音频

2.fillStyle=color

1.#ffffff

2.642

3.rgb(255,128,0)

4.rgba(100,100,100,0.8)

5.hsl(20,62%,68%)

6.hsla(20,82%,33%,0.6)

7.red

3.fillStyle=gradient

//线性渐变色

var grd=context.createLinearGradient(xstart,ystart,xend,yend);

//径向渐变色

var grd=context.createRadialGradient(x0,y0,r0,x1,y1,r1);

grd.addColorStop(stop,color)

 1 <!DOCTYPE html>
 2 <html lang="en">
 3 <head>
 4     <meta charset="UTF-8">
 5     <title>Title</title>
 6     <style type="text/css">
 7         #canvas{
 8             border: 1px solid #000;
 9             display:block;
10             margin: 50px auto;
11         }
12     </style>
13 </head>
14 <body>
15 
16 <canvas id="canvas">您的浏览器不支持Canvas</canvas>
17 
18 </body>
19 <script>
20     window.onload=function (ev) {
21         var canvas = document.getElementById("canvas");
22         canvas.width = 800;
23         canvas.height = 785;
24         var context = canvas.getContext("2d");
25         linegradient(context);//线性渐变
26         radiagradient(context);//径向渐变
27     };
28 
29     function linegradient(context) {
30         var gradient = context.createLinearGradient(0,0,800,600);
31         //  设置渐变颜色
32         gradient.addColorStop(0.0, "red");
33         gradient.addColorStop(0.2, "orange");
34         gradient.addColorStop(0.4, "yellow");
35         gradient.addColorStop(0.6, "green");
36         gradient.addColorStop(0.9, "cyan");
37         gradient.addColorStop(1.0, "blue");
38         //gradient.addColorStop(1.0, "purple");
39         //  使用渐变线填充
40         context.fillStyle = gradient;
41         context.fillRect(0, 0, 800, 800);
42     };
43     
44     function radiagradient(ctx) {
45         var gradient = ctx.createRadialGradient(300, 300, 10, 100, 100, 50);
46         gradient.addColorStop(0, 'rgb(255,0,0)'); //红
47         gradient.addColorStop(0.5, 'rgb(0,255,0)');//绿
48         gradient.addColorStop(1, 'rgb(0,0,255)'); //蓝
49         ctx.fillStyle = gradient;
50         ctx.fillRect(0, 0, 600,600);
51     }
52 </script>
53 </html>

4.fillStyle=image||canvas||video

createPattern(img,repeat-style)

createPattern(canvas,repeat-style)

createPattern(video,repeat-style)

repeat-style:  no-repeat(不平铺,就单张)

       repeat-x(横向平铺)

       repeat-y(纵向平铺)

       repeat (横纵向平铺)

本文参与腾讯云自媒体分享计划,欢迎正在阅读的你也加入,一起分享。

发表于

我来说两句

0 条评论
登录 后参与评论

相关文章

来自专栏進无尽的文章

绘图-圆环进度条实现详解

27920
来自专栏Android知识点总结

Android关于Path你所知道的和不知道的一切

42960
来自专栏ml

学习HTML5之塔克大战(详细记录)

          学了一些HTML5的一些基本知识,开始学习制作......           介绍一些基本知识:  px(像素)---》1px等于多少? ...

42770
来自专栏向治洪

React Native仿美团下拉菜单

在很多产品中都会涉及到下拉菜单选择功能,用的最好的当属美团了,其效果如下: ? 要实现上面的效果,在原生中比较好做,直接使用PopWindow组件即可。如...

649100
来自专栏向治洪

React Native仿美团下拉菜单

在很多产品中都会涉及到下拉菜单选择功能,用的最好的当属美团了,其效果如下: ? 要实现上面的效果,在原生中比较好做,直接使用PopWindow组件即可。如果使...

92250
来自专栏lonelydawn的前端猿区

canvas星空的2d绘制示例

一切尽在注释里: <!DOCTYPE html> <html> <head>     <meta charset="utf-8"></meta>     <t...

22490
来自专栏Guangdong Qi

iOS 连续动画效果(让APP动起来)

25630
来自专栏葬爱家族

H5和微信小游戏 Canvas API 整理前言

这段时间闲下来,系统学习了微信小程序和微信小游戏,发现还是挺有意思的。现在微信小游戏的开发都离不开游戏引擎,用原生小游戏开发工具开发的很少很少。但是毕竟我不是专...

89440
来自专栏Android知识点总结

开源计划之--Android绘图库--LogicCanvas

在html5时,我用JavaScript封装了一个HTML5的canvas库。

37360
来自专栏逸鹏说道

06. Web大前端时代之:HTML5+CSS3入门系列~HTML5 画布(上)

Web大前端时代之:HTML5+CSS3入门系列:http://www.cnblogs.com/dunitian/p/5121725.html 点击原文,查看笔...

39470

扫码关注云+社区

领取腾讯云代金券