首页 网页制作网络编程脚本专栏数据库网站运营网络安全平面设计CMS教程

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

所属分类： 网页制作 / html5 阅读数： 1976
收藏 0 赞 0 分享

基本绘制

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

    
矩形

XML/HTML Code复制内容到剪贴板
  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();   
  8.         
  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. 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. ｝  

    
圆角

XML/HTML Code复制内容到剪贴板
  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();   
  10.         
  11.     // 擦除canvas 画板   
  12.     context.beginPath();   
  13.     context.fillRect(10,10,200,100);   
  14.         
  15.     // 擦除区域   
  16.     context.clearRect(30,30,50,50);   
  17. ｝  

二次贝塞尔曲线

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

    
三次贝塞尔曲线

XML/HTML Code复制内容到剪贴板
  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();   
  12.         
  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. var canvas = document.getElementById('canvas');   
  2. if (canvas.getContext) {   
  3.     var context = 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.      * dx dy canvas 的坐标   
  10.      * dw，dh 表示 image 在canvas中即将绘图的位置   
  11.      * sw，sh 表示image 所要绘图的区域   
  12.      * sx,sy 所要绘图的开始位置    
  13.      */   
  14.     var image = document.getElementById('img');   
  15.     context.drawImage(image, 0, 0);   
  16.      var img = new Image();   
  17.      img.src = 'images/1.jpg';   
  18.      img.onload = function(){   
  19.              
  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);   
  27.              
  28.          // 利用getImageData 和 putImageData 绘制图片   
  29.   
  30.          context.drawImage(img, 10, 10);   
  31.          // 从画板上获取像素数据   
  32.          // 开始位置， 结束位置   
  33.          var imgData = context.getImageData(50,50,100,100);   
  34.          // 将数据画到画板指定位置坐标   
  35.          context.putImageData(imgData,10,260);   
  36.          // 将所去的像素数据一部分，画到画板上   
  37.          context.putImageData(imgData,200,260,50,50,100,100);      
  38.              
  39.          // createImageData 创建像素   
  40.           var imgData = context.getImageData(50,50,200,200);   
  41.           // 创建指定大小的空对象   
  42.           var imgData01 = context.createImageData(imgData);   
  43.               
  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;   
  50.                   
  51.           }   
  52.           context.putImageData(imgData01, 10, 260);   
  53.      }   
  54. }  
更多精彩内容其他人还在看

HTML5梦幻之旅——炫丽的流星雨效果实现过程

流星出现的时候，人们都喜欢对着它们许愿，因为传说对着流星许下愿望后，愿望就能实现，最近出于兴趣，制作一个拖尾效果，后来想到可以通过拖尾效果来实现一下流星雨的效果
收藏 0 赞 0 分享

5个你不知道的HTML5的接口介绍

尽管当前的主流浏览器已经实现了很多的HTML5新特性，但是很多开发者根本就没注意到这些更简洁，也很有用的API，本系列文章介绍这些接口API，同时也希望能鼓励更多开发者去探索那些还不广为人知的API
收藏 0 赞 0 分享

HTML5 placeholder(空白提示)属性介绍

浏览器引入了许多的HTML5 特性其中我最喜欢的一个就是为input元素引入了placeholder属性，placeholder属性显示引导性文字直到输入框获取输入焦点,当有了用户输入内容后引导性内容将会自动隐藏
收藏 0 赞 0 分享

HTML5 自动聚焦(autofocus)属性使用介绍

一个简单的HTML功能是现在允许我们在页面加载完成后自动将输入焦点定位到需要的元素,通过一个叫做 autofocus的属性完成，感兴趣的朋友可以了解下
收藏 0 赞 0 分享

HTML5新增的Css选择器、伪类介绍

HTML5新增了Css选择器、伪类，本文整理了一些，并给出简单的使用介绍，喜欢html5的朋友可以参考下，希望对大家有所帮助
收藏 0 赞 0 分享

通过Canvas及File API缩放并上传图片完整示例

创建一个只管的用户界面，并允许你控制图片的大小。上传到服务器端的数据，并不需要处理enctype为 multi-part/form-data 的情况，仅仅一个简单的POST表单处理程序就可以了. 好了，下面附上完整的代码示例
收藏 0 赞 0 分享

Canvas与Image互相转换示例代码

本文向大家展示怎样转换Image为canvas，以及canvas如何提取出一个Image，示例代码如下，有此需求的朋友可以参考下，希望对大家有所帮助
收藏 0 赞 0 分享

HTML5的语法变化介绍

HTML5的语法变化主要体现在标签不再区分大小写、元素可以省略结束标签、允许省略属性值的属性等等，感兴趣的朋友可以参考下，希望对大家了解html5有所帮助
收藏 0 赞 0 分享

HTML5 预加载让页面得以快速呈现

预加载是一种浏览器机制，使用浏览器空闲时间来预先下载/加载用户接下来很可能会浏览的页面/资源，当用户访问某个预加载的链接时，如果从缓存命中,页面就得以快速呈现
收藏 0 赞 0 分享

HTML5 input元素类型：email及url介绍

HTML5改进的地方想必大家有所知晓，下面我要介绍的是两个新的input元素类型email和url。让我们跟着代码来看看他们的好处，感兴趣的朋友可以参考下
收藏 0 赞 0 分享
查看更多

网络赚钱

更多

站长故事

更多
建站极客
合作伙伴
在线工具
建站极客移动版
聚合全网技术文章，根据你的阅读喜好进行个性推荐
© 2012 - 2020 www.zhanzhang360.cn Some Rights Reserved.
沪ICP备13040166号-22