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教程(8):CSS3透明度指南
Apr 02 HTML / CSS
布局和排版教程 纯css3实现图片三角形排列
Oct 17 HTML / CSS
一款简洁的纯css3代码实现的动画导航
Oct 31 HTML / CSS
CSS3下的渐变文字效果实现示例
Mar 02 HTML / CSS
CSS3为背景图设置遮罩并解决遮罩样式继承问题
Jun 22 HTML / CSS
html5绘制时钟动画
Dec 15 HTML / CSS
微信html5页面调用第三方位置导航的示例
Mar 14 HTML / CSS
canvas实现二维码和图片合成的示例代码
Aug 01 HTML / CSS
HTML5中input输入框默认提示文字向左向右移动的示例代码
Sep 10 HTML / CSS
CSS3 菱形拼图实现只旋转div 背景图片不旋转功能
Mar 30 HTML / CSS
关于html选择框创建占位符的问题
Jun 09 HTML / CSS
css布局巧妙技巧之css三角示例的运用
Mar 16 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和ACCESS写聊天室(四)
2006/10/09 PHP
基于MySQL分区性能的详细介绍
2013/05/02 PHP
PHP strtotime函数用法、实现原理和源码分析
2015/02/04 PHP
Laravel框架中Blade模板的用法示例
2017/08/30 PHP
神奇的代码 通杀各种网站-可随意修改复制页面内容
2008/07/17 Javascript
jQuery dialog 异步调用ashx,webservice数据的代码
2010/08/03 Javascript
javascript控制Div层透明属性由浅变深由深变浅逐渐显示
2013/11/12 Javascript
jQuery替换字符串(实例代码)
2013/11/13 Javascript
js sort 二维数组排序的用法小结
2014/01/24 Javascript
js onmousewheel事件多次触发问题解决方法
2014/10/17 Javascript
JavaScript中的anchor()方法使用详解
2015/06/08 Javascript
基于Cookie常用操作以及属性介绍
2017/09/07 Javascript
vue.js  父向子组件传参的实例代码
2017/10/29 Javascript
vue进行图片的预加载watch用法实例讲解
2018/02/07 Javascript
vue实现动态添加数据滚动条自动滚动到底部的示例代码
2018/07/06 Javascript
解决element-ui里的下拉多选框 el-select 时,默认值不可删除问题
2020/08/14 Javascript
[57:12]完美世界DOTA2联赛循环赛 Inki vs Matador BO2第一场 10.31
2020/11/02 DOTA
django实现分页的方法
2015/05/26 Python
详解Python中contextlib上下文管理模块的用法
2016/06/28 Python
使用 Visual Studio Code(VSCode)搭建简单的Python+Django开发环境的方法步骤
2018/12/17 Python
详解Python利用random生成一个列表内的随机数
2019/08/21 Python
keras获得model中某一层的某一个Tensor的输出维度教程
2020/01/24 Python
5行Python代码实现图像分割的步骤详解
2020/05/25 Python
French Connection官网:女装、男装及家居用品
2019/03/18 全球购物
爱情保证书范文
2014/02/01 职场文书
网上快餐厅创业计划书
2014/02/01 职场文书
法律专业学生的自我评价
2014/02/07 职场文书
幼儿园大班评语大全
2014/04/17 职场文书
就业协议书怎么填
2014/09/15 职场文书
大学生推广普通话演讲稿
2014/09/21 职场文书
安全生产标语大全
2014/10/06 职场文书
毕业典礼邀请函
2015/01/31 职场文书
六一晚会主持词开场白
2015/05/28 职场文书
2015年度招聘工作总结
2015/05/28 职场文书
使用python向MongoDB插入时间字段的操作
2021/05/18 Python
分享几个简单MySQL优化小妙招
2022/03/31 MySQL