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动画效果之animation的常用样式
Mar 09 HTML / CSS
50个强大璀璨的CSS3/JS技术运用实例
Feb 27 HTML / CSS
纯css3实现的鼠标悬停动画按钮
Dec 23 HTML / CSS
CSS3,线性渐变(linear-gradient)的使用总结
Jan 09 HTML / CSS
Html5画布_动力节点Java学院整理
Jul 13 HTML / CSS
html5中去掉input type date默认样式的方法
Sep 06 HTML / CSS
基于HTML5 audio元素播放声音jQuery小插件
May 11 HTML / CSS
Html5实现iPhone开机界面示例代码
Jun 30 HTML / CSS
html5图片上传预览示例分享
Apr 14 HTML / CSS
HTML5微信播放全屏问题的解决方法
Mar 09 HTML / CSS
CSS 实现多彩、智能的阴影效果
May 12 HTML / CSS
html css3不拉伸图片显示效果
Jun 07 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 imagecreatefrombmp 从BMP文件或URL新建一图像
2012/07/16 PHP
学习php设计模式 php实现模板方法模式
2015/12/08 PHP
关闭浏览器时提示onbeforeunload事件
2013/12/25 Javascript
JavaScript中如何通过arguments对象实现对象的重载
2014/05/12 Javascript
JS实现的仿东京商城菜单、仿Win右键菜单及仿淘宝TAB特效合集
2015/09/28 Javascript
webpack处理 css\less\sass 样式的方法
2017/08/21 Javascript
Vue.js移动端左滑删除组件的实现代码
2017/09/08 Javascript
详解extract-text-webpack-plugin 的使用及安装
2018/06/12 Javascript
JavaScript实现随机五位数验证码
2019/09/27 Javascript
[00:44]华丽开场!DOTA2勇士令状带来全新对阵画面
2019/05/15 DOTA
python实现微信自动回复功能
2018/04/11 Python
Python实现的爬虫刷回复功能示例
2018/06/07 Python
Python数据抓取爬虫代理防封IP方法
2018/12/23 Python
Python实现网站表单提交和模板
2019/01/15 Python
PyQt5+requests实现车票查询工具
2019/01/21 Python
Python字典对象实现原理详解
2019/07/01 Python
详解python播放音频的三种方法
2019/09/23 Python
pytorch梯度剪裁方式
2020/02/04 Python
pytorch中图像的数据格式实例
2020/02/11 Python
如何用python处理excel表格
2020/06/09 Python
Python ckeditor富文本编辑器代码实例解析
2020/06/22 Python
html5简单示例_动力节点Java学院整理
2017/07/07 HTML / CSS
canvas版人体时钟的实现示例
2021/01/29 HTML / CSS
JAKO-O德国野酷台湾站:德国首屈一指的婴幼童用品品牌
2019/01/14 全球购物
上海某公司.net方向笔试题
2014/09/14 面试题
满月酒答谢词
2014/01/14 职场文书
运动会广播稿400字
2014/01/25 职场文书
运动会致辞稿50字
2014/02/04 职场文书
大学生自我评价200字(4篇)
2014/09/17 职场文书
四风问题个人剖析材料
2014/10/07 职场文书
大学生个人简历自我评价
2015/03/11 职场文书
看上去很美观后感
2015/06/10 职场文书
Python中的np.argmin()和np.argmax()函数用法
2021/06/02 Python
mongodb的安装和开机自启动详细讲解
2021/08/02 MongoDB
Redis Cluster 集群搭建你会吗
2021/08/04 Redis
Docker下安装Oracle19c
2022/04/13 Servers