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参考手册和CSS3代码生成工具加速来学习网页制
Jul 11 HTML / CSS
CSS3制作文字半透明倒影效果的两种实现方式
Aug 08 HTML / CSS
CSS3实现多背景模拟动态边框的效果
Nov 08 HTML / CSS
HTML+CSS3+JS 实现的下拉菜单
Nov 25 HTML / CSS
HTML5中微数据概述及在搜索引擎中的使用举例
Feb 07 HTML / CSS
html5的画布canvas——画出弧线、旋转的图形实例代码+效果图
Jun 09 HTML / CSS
HTML5的自定义属性data-*详细介绍和JS操作实例
Apr 10 HTML / CSS
基于HTML5 的人脸识别活体认证的实现方法
Jun 22 HTML / CSS
html5 canvas合成海报所遇问题及解决方案总结
Aug 03 HTML / CSS
浅谈Html5移动端ios/Android兼容性总结
Jun 01 HTML / CSS
html5中audio支持音频格式的解决方法
Aug 24 HTML / CSS
简单实现一个手持弹幕功能+文字抖动特效
Mar 31 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之readdir函数用法实例
2014/11/13 PHP
php提交过来的数据生成为txt文件
2016/04/28 PHP
解决Laravel无法使用COOKIE和SESSION的问题
2019/10/16 PHP
js小技巧--自动隐藏红叉叉
2007/08/13 Javascript
Javascript 更新 JavaScript 数组的 uniq 方法
2008/01/23 Javascript
javascript 哈希表(hashtable)的简单实现
2010/01/20 Javascript
js Dialog 实践分享
2012/10/22 Javascript
javascript克隆对象深度介绍
2012/11/20 Javascript
node.js中的fs.lchownSync方法使用说明
2014/12/16 Javascript
js实现Select列表内容自动滚动效果代码
2015/08/20 Javascript
基于JavaScript实现图片点击弹出窗口而不是保存
2016/02/06 Javascript
javascript jquery对form元素的常见操作详解
2016/06/12 Javascript
Jquery遍历select option和添加移除option的实现方法
2016/08/26 Javascript
jQuery中的deferred使用方法
2017/03/27 jQuery
vue实现模态框的通用写法推荐
2018/02/26 Javascript
Django模板继承 extend标签实例代码详解
2019/05/16 Javascript
vue脚手架项目创建步骤详解
2021/03/02 Vue.js
[00:10]DOTA2全国高校联赛速递
2018/05/30 DOTA
[01:33]完美世界DOTA2联赛PWL S3 集锦第二期
2020/12/21 DOTA
Python中使用装饰器时需要注意的一些问题
2015/05/11 Python
Python 装饰器深入理解
2017/03/16 Python
详解Python基础random模块随机数的生成
2019/03/23 Python
python中多个装饰器的调用顺序详解
2019/07/16 Python
Django框架基础模板标签与filter使用方法详解
2019/07/23 Python
python实现的生成word文档功能示例
2019/08/23 Python
超实用的 30 段 Python 案例
2019/10/10 Python
使用tqdm显示Python代码执行进度功能
2019/12/08 Python
Python双链表原理与实现方法详解
2020/02/22 Python
django在开发中取消外键约束的实现
2020/05/20 Python
Python基于network模块制作电影人物关系图
2020/06/19 Python
Django模型验证器介绍与源码分析
2020/09/08 Python
Django中的DateTimeField和DateField实现
2021/02/24 Python
canvas 如何绘制线段的实现方法
2018/07/12 HTML / CSS
超市实习总结自我鉴定
2013/09/19 职场文书
小学语文教学反思
2014/02/10 职场文书
结婚典礼主持词
2015/06/29 职场文书