canvas学习笔记（一）

时间：2022-02-03 20:29:56

 canvas是HTML5的新元素之一。使用canvas可以直接在HTML上进行图形操作，所以它具有极大的应用价值。canvas元素本身不具有绘图能力，它需要借助JavaScript来实现绘图功能。

canvas的限制：

  • canvas绘制的图形是静态的，如果要让所画的图形动起来，则需要画出每一帧的图形。
  • 在使用canvas时，需要考虑用户的浏览器和使用环境。
  • canvas目前只是一张二维画布，要想实现三维效果，需要借助第三方类库，如three.js或者Papervision3D等。

使用canvas，只需要在HTML5中添加canvas元素即可：

1 <canvas id="myCanvas" width="200" height="100"></canvas>

通过id获取canvas元素：

1 var canvas = document.getElementById("myCanvas");

获取CanvasRenderingContext2D对象（绘图对象）：

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

设置线条宽度：

1 context.lineWidth = 10;

设置线条颜色：

1 context.strokeStyle = "red";
2 context.strokeStyle = "#ff0000";
3 context.strokeStyle = "rgb(0,0,0)";

设置线帽样式：

1 context.lineCap = 'butt';
2 context.lineCap = 'round';
3 context.lineCap = 'square';

 canvas学习笔记（一）

 设置填充颜色：

1 context.fillStyle = "red";
2 context.fillStyle = "#ff0000";
3 context.fillStyle = "rgb(0,0,0)";

创建一个新的路径：

1 context.beginPath();

设置路径的起始点：

context.moveTo(x, y);

移动画笔至某坐标（产生路径）：

context.lineTo(x, y);

绘制路径：

context.stroke();

绘制矩形：

context.strokeRect(x, y, w, h);
// x,y 左上顶点坐标
// w 矩形宽度
// h 矩形长度
context.rect(x, y, w, h); //功能与context.strokeRect相同

绘制实心矩形：

1 context.fillRect(x, y, w, h);

画圆：

1 context.arc(x, y, r, b, e, bool);
2 // x,y 圆心坐标
3 // r 半径
4 // b 起始弧度
5 // e 终止弧度
6 // bool 是否逆时针绘制

注意：第4、5个参数传入的是圆弧的弧度，如果要画30度的角，则需将其转化为弧度：30*Math.PI/180。

画圆弧：

context.arcTo(P1x, P1y, p2x, p2y, r)
// 当前点：P
// 所绘制的圆弧与线段PP1、PP2相切
// 圆弧半径为： r

擦除canvas：

1 canvas.clearRect(x, y, w, h);
标签：

相关文章