一波HTML5 Canvas基础绘图实例代码集合

网络
秋天的落叶随着秋姑娘翩翩起舞；秋天的落叶随着秋的旋律摇荡；秋天的落叶随着秋的微风留下一片光明的大道。秋天让我们来体会 "自古逢秋悲寂寥 "的凄凉；秋天让我们来体会 "无边落木萧萧下 "的哀愁；秋天让我们来体会 "秋空雁度青天远 "的疏朗。

基本绘制

XML/HTML Code复制内容到剪贴板
  1. varcanvas=document.getElementById('canvas');
  2. if(canvas.getContext){
  3. varcontext=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. ｝


矩形

XML/HTML Code复制内容到剪贴板
  1. varcanvas=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. ｝


圆形

XML/HTML Code复制内容到剪贴板
  1. varcanvas=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. ｝


圆角

XML/HTML Code复制内容到剪贴板
  1. varcanvas=document.getElementById('canvas');
  2. if(canvas.getContext){
  3. context.beginPath();
  4. context.moveTo(20,20);
  5. context.lineTo(70,20);
  6. //为一条路径画弧度p1.xp1.yp2.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. ｝

二次贝塞尔曲线

XML/HTML Code复制内容到剪贴板
  1. varcanvas=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. ｝


三次贝塞尔曲线

XML/HTML Code复制内容到剪贴板
  1. varcanvas=document.getElementById('canvas');
  2. if(canvas.getContext){
  3. context.moveTo(68,130);
  4. varcX1=20;
  5. varcY1=10;
  6. varcX2=268;
  7. varcY2=10;
  8. varendX=268;
  9. varendY=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. }

画板进阶使用

XML/HTML Code复制内容到剪贴板
  1. varcanvas=document.getElementById('canvas');
  2. if(canvas.getContext){
  3. varcontext=canvas.getContext('2d');
  4. /*
  5. *drawImage(image,dx,dy)
  6. *drawImage(image,dx,dy,dw,dh)
  7. *drawImage(image,sx,sy,sw,sh,dx,dy,dw,dh);
  8. *image绘图对象
  9. *dxdycanvas的坐标
  10. *dw，dh表示image在canvas中即将绘图的位置
  11. *sw，sh表示image所要绘图的区域
  12. *sx,sy所要绘图的开始位置
  13. */
  14. varimage=document.getElementById('img');
  15. context.drawImage(image,0,0);
  16. varimg=newImage();
  17. img.src='images/1.jpg';
  18. img.onload=function(){
  20. //drawImage
  21. //从0,0坐标开始绘制
  22. //context.drawImage(img,0,0);
  23. //从0，0开始,绘制整张图到100,100长宽
  24. //context.drawImage(img,0,0,100,100);
  25. //截图,50,50到100,100从260,130开始绘制，放到100,100长宽区域中
  26. //context.drawImage(img,50,50,100,100,260,130,100,100);
  28. //利用getImageData和putImageData绘制图片
  30. context.drawImage(img,10,10);
  31. //从画板上获取像素数据
  32. //开始位置，结束位置
  33. varimgData=context.getImageData(50,50,100,100);
  34. //将数据画到画板指定位置坐标
  35. context.putImageData(imgData,10,260);
  36. //将所去的像素数据一部分，画到画板上
  37. context.putImageData(imgData,200,260,50,50,100,100);
  39. //createImageData创建像素
  40. varimgData=context.getImageData(50,50,200,200);
  41. //创建指定大小的空对象
  42. varimgData01=context.createImageData(imgData);
  44. for(i=0;i<imgData01.width*imgData01.height*4;i+=4){
  45. //红色像素
  46. imgData01.data[i+0]=255;
  47. imgData01.data[i+1]=0;
  48. imgData01.data[i+2]=0;
  49. imgData01.data[i+3]=255;
  51. }
  52. context.putImageData(imgData01,10,260);
  53. }
  54. }

到此这篇关于一波HTML5 Canvas基础绘图实例代码集合就介绍到这了。人这一生能力有限，但是努力无限，努力做一个的人，做一个心态阳光的人，做一个积极向上的人，用正能量激发自己，也感染身边的，你阳光，世界也会因你而精彩！一辈子要记住三句话：看人长处、帮人难处、记人好处，做一个充满正能量的人！更多相关一波HTML5 Canvas基础绘图实例代码集合内容请查看相关栏目，小编编辑不易，再次感谢大家的支持！

您可能有感兴趣的文章
如何使用canvas对video视频某一刻截图功能
Canvas绘制像素风图片的示例代码
canvas画图被放大且模糊的如何解决方法
Canvas获取视频第一帧缩略图的如何实现
详解如何在Canvas中添加事件的方法