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

XML/HTML Code复制内容到剪贴板


 
var canvas = document.getElementById('canvas'); 
 
if (canvas.getContext) { 
 
 var context = canvas.getContext('2d'); 
 
 // 线宽 
 
 context.lineWidth = 4; 
 
 // 画笔颜色 
 
 context.strokeStyle = 'red'; 
 
 // 填充色 
 
 context.fillStyle = "red"; 
 
 // 线帽类型 
 
 context.lineCap = 'butt'; // round, square 
 
 // 开始路径 
 
 context.beginPath(); 
 
 // 起点 
 
 context.moveTo(10,10); 
 
 // 终点 
 
 context.lineTo(150,50); 
 
 // 绘制 
 
 context.stroke(); 
 
｝ 



 
矩形

XML/HTML Code复制内容到剪贴板


 
var canvas = document.getElementById('canvas'); 
 
if (canvas.getContext) { 
 
 context.beginPath(); 
 
 context.strokeRect(10,10,70,40); 
 
 // 矩形的另一种方式 
 
 context.rect(10,10.70,40); 
 
 context.stroke(); 
 
 
 
 // 实心矩形 
 
 context.beginPath(); 
 
 context.fillRect(10,10,70,40); 
 
 // 另一种方式实心矩形 
 
 context.beginPath(); 
 
 context.rect(10,10,70,40); 
 
 context.fill(); 
 
｝ 



 
 圆形
XML/HTML Code复制内容到剪贴板


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



 
圆角
XML/HTML Code复制内容到剪贴板


 
var canvas = document.getElementById('canvas'); 
 
if (canvas.getContext) { 
 
 context.beginPath(); 
 
 context.moveTo(20,20); 
 
 context.lineTo(70,20); 
 
 // 为一条路径画弧度p1.x p1.y p2.x, p2.y 弧半径， 
 
 context.arcTo(120,30,120,70, 50); 
 
 context.lineTo(120,120); 
 
 context.stroke(); 
 
 
 
 // 擦除canvas 画板 
 
 context.beginPath(); 
 
 context.fillRect(10,10,200,100); 
 
 
 
 // 擦除区域 
 
 context.clearRect(30,30,50,50); 
 
｝ 



二次贝塞尔曲线
XML/HTML Code复制内容到剪贴板


 
var canvas = document.getElementById('canvas'); 
 
if (canvas.getContext) { 
 
 context.beginPath(); 
 
 context.moveTo(100,100); 
 
 context.quadraticCurveTo(20,50,200,20); 
 
 context.stroke(); 
 
｝ 



 
三次贝塞尔曲线
XML/HTML Code复制内容到剪贴板


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



画板进阶使用

XML/HTML Code复制内容到剪贴板


 
var canvas = document.getElementById('canvas'); 
 
if (canvas.getContext) { 
 
 var context = canvas.getContext('2d'); 
 
 /* 
 
 * drawImage(image,dx,dy) 
 
 * drawImage(image,dx,dy,dw,dh) 
 
 * drawImage(image,sx,sy,sw,sh,dx,dy,dw,dh); 
 
 * image 绘图对象 
 
 * dx dy canvas 的坐标 
 
 * dw，dh 表示 image 在canvas中即将绘图的位置 
 
 * sw，sh 表示image 所要绘图的区域 
 
 * sx,sy 所要绘图的开始位置 
 
 */ 
 
 var image = document.getElementById('img'); 
 
 context.drawImage(image, 0, 0); 
 
 var img = new Image(); 
 
 img.src = 'images/1.jpg'; 
 
 img.onload = function(){ 
 
 
 
 // drawImage 
 
 // 从 0,0 坐标开始绘制 
 
 // context.drawImage(img,0,0); 
 
 // 从0，0 开始,绘制整张图到100,100 长宽 
 
 // context.drawImage(img, 0, 0, 100, 100); 
 
 // 截图,50,50 到 100,100 从 260,130 开始绘制，放到 100,100 长宽区域中 
 
 // context.drawImage(img, 50, 50, 100,100, 260, 130, 100, 100); 
 
 
 
 // 利用getImageData 和 putImageData 绘制图片 
 
 
 
 context.drawImage(img, 10, 10); 
 
 // 从画板上获取像素数据 
 
 // 开始位置， 结束位置 
 
 var imgData = context.getImageData(50,50,100,100); 
 
 // 将数据画到画板指定位置坐标 
 
 context.putImageData(imgData,10,260); 
 
 // 将所去的像素数据一部分，画到画板上 
 
 context.putImageData(imgData,200,260,50,50,100,100); 
 
 
 
 // createImageData 创建像素 
 
 var imgData = context.getImageData(50,50,200,200); 
 
 // 创建指定大小的空对象 
 
 var imgData01 = context.createImageData(imgData); 
 
 
 
 for (i = 0; i < imgData01.width * imgData01.height * 4; i+=4) { 
 
 // 红色像素 
 
 imgData01.data[i + 0] = 255; 
 
 imgData01.data[i+1] = 0; 
 
 imgData01.data[i+2] = 0; 
 
 imgData01.data[i+3] = 255; 
 
 
 
 } 
 
 context.putImageData(imgData01, 10, 260); 
 
 } 
 
}