HTML5 画布canvas使用方法


Posted in HTML / CSS onMarch 18, 2016

canvas 元素使用 JavaScript 在网页上绘制图像,本身是没有绘图能力。

canvas 是一个矩形区域,可以控制其每一像素。

canvas 拥有多种绘制路径、矩形、圆形、字符以及添加图像的方法。

下面来做几个示例:

1、填充画布

JavaScript Code复制内容到剪贴板
  1. <canvas id="myCanvas" width="200" height="100" style="border:1px solid red;"></canvas>   
  2. <script type="text/javascript">   
  3. var c=document.getElementById("myCanvas");   
  4. var cxt=c.getContext("2d");   
  5. cxt.fillStyle="#ccc";   
  6. cxt.fillRect(5,10,150,60); //x,y,x,y   
  7. </script>   
  8.   

执行如下:

HTML5 画布canvas使用方法

2、获取坐标

JavaScript Code复制内容到剪贴板
  1. <script type="text/javascript">    
  2.  function cnvs_getCoordinates(e){   
  3.    x=e.clientX;   
  4.    y=e.clientY;   
  5.    document.getElementById("xycoordinates").innerHTML="Coordinates: (" + x + "," + y + ")"; }   
  6.  function cnvs_clearCoordinates(){   
  7.    document.getElementById("xycoordinates").innerHTML="";}   
  8. </script>   
XML/HTML Code复制内容到剪贴板
  1. <div id="coordiv" style="float:left;width:199px;height:99px;border:1px solid #c3c3c3" onmousemove="cnvs_getCoordinates(event)" onmouseout="cnvs_clearCoordinates()"></div>  
  2. <div id="xycoordinates"></div>  
  3.   

执行如下:

HTML5 画布canvas使用方法

3、绘制线条、图形

 1)、绘制正方形如下:

JavaScript Code复制内容到剪贴板
  1. <canvas id="myCanvas" width="200" height="100" style="border:1px solid #c3c3c3;">   
  2.  您的浏览器不支持 canvas 标签.   
  3. </canvas>   
  4.   
  5. <script type="text/javascript">   
  6.   
  7. var c=document.getElementById("myCanvas");   
  8. var cxt=c.getContext("2d");   
  9. cxt.moveTo(10,10); //x,y 起点   
  10. cxt.lineTo(10,50); //x,y   
  11. cxt.lineTo(50,50); //x,y   
  12. cxt.lineTo(50,10); //x,y   
  13. cxt.lineTo(10,10); //x,y   
  14. cxt.stroke();   
  15. </script>   
  16.   

 执行如下

HTML5 画布canvas使用方法

2)、绘制圆形如下:

JavaScript Code复制内容到剪贴板
  1. <canvas id="myCanvas" width="200" height="100" style="border:1px solid #c3c3c3;">   
  2. 你的浏览器不支持canvas    
  3. </canvas>   
  4.   
  5. <script type="text/javascript">   
  6. var c=document.getElementById("myCanvas");   
  7. var cxt=c.getContext("2d");   
  8. cxt.fillStyle="#ccc";   
  9. cxt.beginPath();   
  10. cxt.arc(20,20,10,0,Math.PI*2,true);   
  11. cxt.closePath();   
  12. cxt.fill();   
  13. </script>   
  14.   

执行如下:

HTML5 画布canvas使用方法

4、绘制渐变

JavaScript Code复制内容到剪贴板
  1. <canvas id="myCanvas" width="200" height="100" style="border:1px solid #c3c3c3;">   
  2. 您的浏览器不支持 canvas 标签.   
  3. </canvas>   
  4.   
  5. <script type="text/javascript">   
  6. var c=document.getElementById("myCanvas");   
  7. var cxt=c.getContext("2d");   
  8. var grd=cxt.createLinearGradient(0,0,175,50);   
  9. grd.addColorStop(0,"#000000"); //黑   
  10. grd.addColorStop(1,"#FFFFFF"); //白   
  11. cxt.fillStyle=grd;   
  12. cxt.fillRect(5,10,175,50);//x,y,x,y   
  13. </script>   
  14.   

执行如下:

HTML5 画布canvas使用方法

5、图片

JavaScript Code复制内容到剪贴板
  1. <canvas id="myCanvas" width="300" height="200" style="border:1px solid #c3c3c3;">   
  2. 您的浏览器不支持 canvas 标签.   
  3. </canvas>   
  4.   
  5. <script type="text/javascript">   
  6. var c=document.getElementById("myCanvas");   
  7. var cxt=c.getContext("2d");   
  8. var img=new Image()   
  9. img.src="aa.png"  
  10. cxt.drawImage(img,10,20); //x,y   
  11. </script>   
  12.   

 执行如下:

HTML5 画布canvas使用方法

以上就是本文的全部内容,希望对大家的学习有所帮助。

原文:http://www.cnblogs.com/LoveSuk/archive/2016/03/17/5288368.html

HTML / CSS 相关文章推荐
纯CSS3实现自定义Tooltip边框涂鸦风格的教程
Nov 05 HTML / CSS
css3实现3D色子翻转特效
Dec 23 HTML / CSS
基础的CSS3弹性盒Flexbox布局使用实例
Apr 08 HTML / CSS
用React加CSS3实现微信拆红包动画效果
Mar 13 HTML / CSS
纯css3实现宠物小鸡实例代码
Oct 08 HTML / CSS
CSS3 3D酷炫立方体变换动画的实现
Mar 26 HTML / CSS
纯CSS3制作页面切换效果的实例代码
May 30 HTML / CSS
css3动画 小球滚动 js控制动画暂停
Nov 29 HTML / CSS
详解CSS3 filter:drop-shadow滤镜与box-shadow区别与应用
Aug 24 HTML / CSS
Html5 web本地存储实例详解
Jul 28 HTML / CSS
解决HTML5手机端页面缩放的问题
Oct 27 HTML / CSS
详解HTML5.2版本带来的修改
May 06 HTML / CSS
HTML5 Canvas的常用线条属性值总结
Mar 17 #HTML / CSS
HTML5 Canvas基本线条绘制的实例教程
Mar 17 #HTML / CSS
HTML5 Canvas入门学习教程
Mar 17 #HTML / CSS
HTML5 3D衣服摇摆动画特效
Mar 17 #HTML / CSS
利用HTML5 Canvas制作键盘及鼠标动画的实例分享
Mar 15 #HTML / CSS
通过HTML5 Canvas API绘制弧线和圆形的教程
Mar 14 #HTML / CSS
HTML5 canvas实现移动端上传头像拖拽裁剪效果
Mar 14 #HTML / CSS
You might like
php入门学习知识点三 PHP上传
2011/07/14 PHP
thinkPHP实现的联动菜单功能详解
2017/05/05 PHP
原生PHP实现导出csv格式Excel文件的方法示例【附源码下载】
2019/03/07 PHP
JS验证邮箱格式是否正确的代码
2013/12/05 Javascript
js类式继承的具体实现方法
2013/12/31 Javascript
JavaScript统计字符串中每个字符出现次数完整实例
2016/01/28 Javascript
带你快速理解javascript中的事件模型
2017/08/14 Javascript
详解使用Vue Router导航钩子与Vuex来实现后退状态保存
2017/09/11 Javascript
JS编写兼容IE6,7,8浏览器无缝自动轮播
2018/10/12 Javascript
小程序云开发初探(小结)
2018/10/24 Javascript
node全局变量__dirname与__filename的区别
2019/01/14 Javascript
详解微信小程序用定时器实现倒计时效果
2019/04/30 Javascript
浅谈python 线程池threadpool之实现
2017/11/17 Python
Python爬虫设置代理IP的方法(爬虫技巧)
2018/03/04 Python
python如何通过实例方法名字调用方法
2018/03/21 Python
Python 删除整个文本中的空格,并实现按行显示
2018/07/24 Python
python如何求解两数的最大公约数
2018/09/27 Python
Python3 获取一大段文本之间两个关键字之间的内容方法
2018/10/11 Python
使用Python实现微信提醒备忘录功能
2018/12/04 Python
python如何以表格形式打印输出的方法示例
2019/06/21 Python
详解Python self 参数
2019/08/30 Python
Python selenium使用autoIT上传附件过程详解
2020/05/26 Python
Python如何安装第三方模块
2020/05/28 Python
图解Python中深浅copy(通俗易懂)
2020/09/03 Python
Python爬取网页信息的示例
2020/09/24 Python
Python爬虫逆向分析某云音乐加密参数的实例分析
2020/12/04 Python
Python 求向量的余弦值操作
2021/03/04 Python
CSS3 文字动画效果
2020/11/12 HTML / CSS
HTML5 直播疯狂点赞动画实现代码 附源码
2020/04/14 HTML / CSS
美国知名运动产品零售商:Foot Locker
2016/07/23 全球购物
日本网路线上商品代购服务:转送JAPAN
2016/08/05 全球购物
idealfit英国:世界领先的女性健身用品和运动衣物品牌
2017/11/25 全球购物
Nordgreen英国官网:斯堪的纳维亚设计师手表
2018/10/24 全球购物
澳大利亚优质葡萄酒专家:Vintage Cellars
2019/01/08 全球购物
中考标语大全
2014/06/05 职场文书
欠款证明
2015/06/24 职场文书