HTML5 canvas 绘图与动画

时间：2021-12-23 14:50:50

canvas

 

<vanvas id="canvas" width="900" height="500">Your browser does not support canvas!</canvas>

注意：开始和结束标签中的内容是在浏览器不支持canvas时显示的内容

canvas 不适合在 css 样式中设置宽高，应该直接设 width 和 height 属性的值，原因是：css 中设置的宽高是 canvas 显示画布的大小，而在属性中设置的宽高表示 canvas 画布内动画显示的宽高。

1. 一般的设置

1 window.onload = function () { 2     var canvas = document.getElementById("canvas"), 3           contaxt = canvas.getContext("2d"); 4     if (!context) { 5         alert("该浏览器不支持canvas!"); 6  } 7 }

 

2. 画线

1     context.moveTo(100, 100);　　//先设置绘制路径行为 2     context.lineTo(500, 500); 3     context.lineTo(500, 100); 4     context.lineTo(100, 100); 5 
6     context.lineWidth = 5; 7 
8     context.strokeStyle = "#005588"; 9     context.stroke();   //笔画,绘制上面的行为，默认将图形自动封闭

 

 

3. 着色

1     context.moveTo(100, 100); 2     context.lineTo(500, 500); 3     context.lineTo(500, 100); 4     context.lineTo(100, 100); 5 
6     context.fillStyle = "#f00"; 7     context.fill();

 

 

4. 绘制两部分图形

 1     context.beginPath();    //开始新的绘制
 2     context.moveTo(100, 100);  3     context.lineTo(500, 500);  4     context.lineTo(100, 500);  5     context.lineTo(100, 100);  6     context.strokeStyle = "#f00";  7  context.stroke();  8     context.closePath();    //结束本次绘制
 9 
10     context.beginPath();    //开始新的绘制
11     context.moveTo(200, 100); 12     context.lineTo(500, 400); 13     context.strokeStyle = "#000"
14  context.stroke(); 15     context.closePath();    //结束本次绘制

 

 

5. 绘制一个圆

context.arc（centerX，centerY，radius，startingAngle，endingAngle，anticlockwise=false（此参数可省略，默认false））；

参数（圆心x坐标，圆心y坐标，半径，开始的位置弧度，结束的位置弧度，false顺时针，true逆时针）

 理解弧度

HTML5 canvas 绘图与动画

1  例： 2     context.arc(200, 200, 100, 0, 1.5*Math.PI); 3     context.lineWidth = 5; 4     context.stroke();

 

 

6. 对矩形空间内的图像进行刷新

cont.clearRect(0, 0, context.canvas.width, context.canvas.height);

 

 

标签：

相关文章