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 相关文章推荐
详解CSS的border边框属性及其在CSS3中的新特性
May 10 HTML / CSS
CSS3制作炫酷的下拉菜单及弹起式选单的实例分享
May 17 HTML / CSS
利用CSS3实现的文字定时向上滚动
Aug 29 HTML / CSS
详解使用HTML5的classList属性操作CSS类
Oct 13 HTML / CSS
HTML5梦幻之旅——炫丽的流星雨效果实现过程
Aug 06 HTML / CSS
通过Canvas及File API缩放并上传图片完整示例
Aug 08 HTML / CSS
HTML5中div、article、section的区别及使用介绍
Aug 14 HTML / CSS
HTML5中原生的右键菜单创建方法
Jun 28 HTML / CSS
HTML5实现自带进度条和滑块滑杆效果
Apr 17 HTML / CSS
AmazeUI折叠式卡片布局,整合内容列表、表格组件实现
Aug 20 HTML / CSS
如何使用canvas绘制可移动网格的示例代码
Dec 14 HTML / CSS
CSS3 制作的悬停缩放特效
Apr 13 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
上海永华YH-R296(华普R-96)12波段立体声收音机的分析和打理
2021/03/02 无线电
PHP使用GIFEncoder类处理gif图片实例
2014/07/01 PHP
深入讲解PHP的Yii框架中的属性(Property)
2016/03/18 PHP
不常用但很实用的PHP预定义变量分析
2019/06/25 PHP
Web层改进II-用xmlhttp 无声息提交复杂表单
2007/01/22 Javascript
使用JavaScript 实现各种跨域的方法
2013/05/08 Javascript
用js实现输入提示(自动完成)的实例代码
2013/06/14 Javascript
利用js动态添加删除table行的示例代码
2013/12/16 Javascript
清除div下面的所有标签的方法
2014/02/17 Javascript
JS实现3D图片旋转展示效果代码
2015/09/22 Javascript
常见的javascript跨域通信方法
2015/12/31 Javascript
js实现选项卡内容切换以及折叠和展开效果【推荐】
2017/01/08 Javascript
js仿淘宝评价评分功能
2017/02/28 Javascript
JS实现自动轮播图效果(自适应屏幕宽度+手机触屏滑动)
2017/06/19 Javascript
实例讲解Vue.js中router传参
2018/04/22 Javascript
angular 内存溢出的问题解决
2018/07/12 Javascript
vue实现动态显示与隐藏底部导航的方法分析
2019/02/11 Javascript
JavaScript利用键盘码控制div移动
2020/03/19 Javascript
如何检测JavaScript中的死循环示例详解
2020/08/30 Javascript
原生JavaScript实现轮播图
2021/01/10 Javascript
Python在Windows和在Linux下调用动态链接库的教程
2015/08/18 Python
Python程序员面试题 你必须提前准备!(答案及解析)
2018/01/23 Python
python 实现对文件夹中的图像连续重命名方法
2018/10/25 Python
python elasticsearch环境搭建详解
2019/09/02 Python
Django中间件拦截未登录url实例详解
2019/09/03 Python
Django框架反向解析操作详解
2019/11/28 Python
python实现输入的数据在地图上生成热力图效果
2019/12/06 Python
python上selenium的弹框操作实现
2020/07/13 Python
微信端html5页面调用分享接口示例
2018/03/14 HTML / CSS
拾金不昧表扬信怎么写
2015/05/04 职场文书
给男朋友的道歉短信
2015/05/12 职场文书
团拜会主持词
2015/07/04 职场文书
2015教师个人德育工作总结
2015/07/22 职场文书
小学英语教师2015年度个人工作总结
2015/10/14 职场文书
2016年社区综治宣传月活动总结
2016/03/16 职场文书
解除租赁合同协议书
2016/03/21 职场文书