php画直线圆矩形,Canvas入门（1）：绘制矩形、圆、直线、曲线等基本图形_html/css_WEB-ITnose...

1: 2: 3: 4: 5: canvas元素学习 6: 7: 8: 9: 10:

canvas元素学习 11: 12: 13:

canvas.js:

1: window.οnlοad=function() 2: { 3: // 获取canvas 的ID 4: var canvas = document.getElementById('canvas'); 5: if (canvas == null) 6: { 7: return false; 8: } 9: // 获取上下文 10: var context = canvas.getContext('2d'); 11: // 设置填充的样式 12: context.fillStyle = "#eeeeff";

13: // 绘制矩形,以fillStyle填充，fillRect(strokeRect)前两个参数是矩形左上角位置,后两个参数分别是宽和高

//默认原点是canvas的左上角 14: context.fillRect(0,0,400,300); 15: context.fillStyle = 'red'; 16: // 设置边框的样式 17: context.strokeStyle = 'blue'; 18: // 设置边框大小 19: context.lineWidth = 2; 20: context.fillRect(50,50,100,100); 21: // 绘制矩形边框 22: context.strokeRect(50,50,100,100); 23: }

效果：

2、绘制圆形：使用路径绘制

1: // 获取canvas 的ID 2: var canvas = document.getElementById('canvas'); 3: if (canvas == null) 4: { 5: return false; 6: } 7: // 获取上下文 8: var context = canvas.getContext('2d'); 9: // 设置填充的样式 10: context.fillStyle = "#eeeeff"; 11: // 绘制矩形,以fillStyle填充 12: context.fillRect(0,0,400,300); 13: for(var i = 0; i<9; i++) 14: { 15: // 创建路径 16: context.beginPath(); 17: // 绘制圆形路径 18: context.arc(i*25, i*25, i*10, 0, Math.PI * 2, true); 19: // 关闭路径，如果不关闭，则图像会重叠 20: context.closePath(); 21: context.fillStyle = 'rgba(255,0,0,0.25)'; 22: // 以fillStyle填充 23: context.fill(); 24: }

arc()绘制圆弧，其参数如下

arc(x,y,radius,startAngle,endAngle,anticlockwise):x,y 是圆弧的圆心位置，radius是半径，startAngle和endAngle是起始和结束的角度，单位是弧度(度数必须转为弧 度)，anticlockwise是一个布尔值，true表示顺时针绘制图像，false表示逆时针绘制。起始角度是0，结束角度是360(PI*2)就 可以绘制圆形。

效果：

3、绘制直线

绘制直线用到moveTo()和lineTo()两个方法

1: // 获取canvas 的ID 2: var canvas = document.getElementById('canvas'); 3: if (canvas == null) 4: { 5: return false; 6: } 7: // 获取上下文 8: var context = canvas.getContext('2d'); 9: // 设置填充的样式 10: context.fillStyle = "#eeeeff"; 11: // 绘制矩形,以fillStyle填充 12: context.fillRect(0,0,400,300);

13: context.beginPath();

//参数线的起点坐标

14: context.moveTo(50,50);

//参数线的终点坐标 15: context.lineTo(100,100);

16: context.closePath();

//关闭路径之后绘制图形 17: context.strokeStyle = 'red'; 18: context.stroke();

效果：

绘制一个复杂点的

1: // 获取canvas 的ID 2: var canvas = document.getElementById('canvas'); 3: if (canvas == null) 4: { 5: return false; 6: } 7: // 获取上下文 8: var context = canvas.getContext('2d'); 9: // 设置填充的样式 10: context.fillStyle = "#eeeeff"; 11: // 绘制矩形,以fillStyle填充 12: context.fillRect(0,0,400,300); 13: var dx = 150; 14: var dy = 150; 15: var s = 100; 16: // 创建路径 17: context.beginPath(); 18: context.fillStyle = 'rgb(100,255,100)'; 19: context.strokeStyle = 'rgb(0,0100)'; 20: var x = Math.sin(0); 21: var y = Math.cos(0); 22: var dig = Math.PI/15 *11; 23: for (var i = 0; i < 30; i++) { 24: var x = Math.sin(i * dig); 25: var y = Math.cos(i * dig); 26: context.lineTo(dx+x*s,dx+y*s); 27: } 28: context.closePath(); 29: context.fill(); 30: context.stroke();

效果：

4、绘制曲线：利用bezierCurveTo绘制贝济埃曲线

bezierCurveTo可以绘制曲线，是lineTo的曲线版本

1: // 获取canvas 的ID 2: var canvas = document.getElementById('canvas'); 3: if (canvas == null) 4: { 5: return false; 6: } 7: // 获取上下文 8: var context = canvas.getContext('2d'); 9: // 设置填充的样式 10: context.fillStyle = "#eeeeff"; 11: // 绘制矩形,以fillStyle填充 12: context.fillRect(0,0,400,300); 13: var dx = 150; 14: var dy = 150; 15: var s = 100; 16: // 创建路径 17: context.beginPath(); 18: context.fillStyle = 'rgb(100,255,100)'; 19: context.strokeStyle = 'rgb(0,0100)'; 20: var x = Math.sin(0); 21: var y = Math.cos(0); 22: var dig = Math.PI/15 *11; 23: context.moveTo(dx,dy); 24: for (var i = 0; i < 30; i++) { 25: var x = Math.sin(i * dig); 26: var y = Math.cos(i * dig); 27: context.bezierCurveTo(dx+x*s,dy+y*s-100,dx+x*s+100,dy+y*s,dx+x*s,dy+y*s); 28: } 29: context.closePath(); 30: context.fill(); 31: context.stroke();

效果

下一篇：Canvas入门(2):图形渐变和图像形变换

本文原创发布php中文网，转载请注明出处，感谢您的尊重！