欢迎您访问程序员文章站本站旨在为大家提供分享程序员计算机编程知识!
您现在的位置是: 首页  >  IT编程

canvas学习笔记(一)

程序员文章站 2022-10-30 22:40:58
canvas是HTML5的新元素之一。使用canvas可以直接在HTML上进行图形操作,所以它具有极大的应用价值。canvas元素本身不具有绘图能力,它需要借助JavaScript来实现绘图功能。 canvas的限制: canvas绘制的图形是静态的,如果要让所画的图形动起来,则需要画出每一帧的图形 ......

 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);