一波HTML5 Canvas基础绘图实例代码集合_html5教程技巧

基本绘制

1. var canvas = document.getElementById('canvas');
2. if (canvas.getContext) {
3. var context = canvas.getContext('2d');
4. // 线宽
5. context.lineWidth = 4;
6. // 画笔颜色
7. context.strokeStyle = 'red';
8. // 填充色
9. context.fillStyle = "red";
10. // 线帽类型
11. context.lineCap = 'butt'; // round, square
12. // 开始路径
13. context.beginPath();
14. // 起点
15. context.moveTo(10,10);
16. // 终点
17. context.lineTo(150,50);
18. // 绘制
19. context.stroke();
20. ｝

矩形

1. var canvas = document.getElementById('canvas');
2. if (canvas.getContext) {
3. context.beginPath();
4. context.strokeRect(10,10,70,40);
5. // 矩形的另一种方式
6. context.rect(10,10.70,40);
7. context.stroke();
9. // 实心矩形
10. context.beginPath();
11. context.fillRect(10,10,70,40);
12. // 另一种方式实心矩形
13. context.beginPath();
14. context.rect(10,10,70,40);
15. context.fill();
16. ｝

圆形

1. var canvas = document.getElementById('canvas');
2. if (canvas.getContext) {
3. context.beginPath();
4. // 圆中心坐标x, 圆中心坐标Y, 圆弧半径， 起始角度，终止角度，是否逆时针
5. // 第4个参数和第五个参数是要传入的弧度，如果画30角度，需要将其转化为弧度 30 * Math.PI / 180
6. context.arc(100,100,70,0,130 * Math.PI / 180, true);
7. context.stroke();
8. context.fill();
9. ｝

圆角

1. var canvas = document.getElementById('canvas');
2. if (canvas.getContext) {
3. context.beginPath();
4. context.moveTo(20,20);
5. context.lineTo(70,20);
6. // 为一条路径画弧度p1.x p1.y p2.x, p2.y 弧半径，
7. context.arcTo(120,30,120,70, 50);
8. context.lineTo(120,120);
9. context.stroke();
11. // 擦除canvas 画板
12. context.beginPath();
13. context.fillRect(10,10,200,100);
15. // 擦除区域
16. context.clearRect(30,30,50,50);
17. ｝

二次贝塞尔曲线

1. var canvas = document.getElementById('canvas');
2. if (canvas.getContext) {
3. context.beginPath();
4. context.moveTo(100,100);
5. context.quadraticCurveTo(20,50,200,20);
6. context.stroke();
7. ｝

三次贝塞尔曲线

1. var canvas = document.getElementById('canvas');
2. if (canvas.getContext) {
3. context.moveTo(68,130);
4. var cX1 = 20;
5. var cY1 = 10;
6. var cX2 = 268;
7. var cY2 = 10;
8. var endX = 268;
9. var endY = 170;
10. context.bezierCurveTo(cX1, cY1, cX2, cY2, endX, endY);
11. context.stroke();
13. // 利用clip指定绘图区域，指定绘图区域之后，只能在绘图区域中进行绘图擦欧总
14. // 绘制圆形
15. context.arc(100,100,40,0, 360 * Math.PI/ 180 , true);
16. // 限制区域
17. context.clip();
18. // 开始尝试绘制其他
19. context.beginPath();
20. context.fillStyle = 'lightblue';
21. // 结果矩形并没有显示出来
22. context.fillRect(0,0,300,150);
23. }