调用HTML5的Canvas API绘制图形的快速入门指南


Posted in HTML / CSS onJune 17, 2016

1. Canvas元素
以下html代码定义了一个canvas元素。

XML/HTML Code复制内容到剪贴板
  1. <!DOCTYPE html>  
  2. <html>  
  3. <head>  
  4.     <title>Canvas快速入门</title>  
  5.     <meta charset="utf-8"/>  
  6. </head>  
  7. <body>  
  8. <div>  
  9.     <canvas id="mainCanvas" width="640" height="480"></canvas>  
  10. </div>  
  11. </body>  
  12. </html>  

通过以下Javascript语句访问canvas元素:

JavaScript Code复制内容到剪贴板
  1. //DOM写法   
  2. window.onload = function () {   
  3.     var canvas = document.getElementById("mainCanvas");   
  4.     var context = canvas.getContext("2d");   
  5. };   
  6. //jQuery写法   
  7. $(document).ready(function () {   
  8.     var canvas = $("#mainCanvas");   
  9.     var context = canvas.get(0).getContext("2d");   
  10. });   
  11. //接下来就可以调用context的方法来调用绘图API  

2. 基础API
2.1 坐标系统
Canvas 2D渲染上下文采用平面笛卡尔坐标系统,左上角为原点(0,0),坐标系统的1个单位相当于屏幕的1个像素。具体如下图:
调用HTML5的Canvas API绘制图形的快速入门指南

2.2 绘制基本图形
2.2.1 矩形

JavaScript Code复制内容到剪贴板
  1. //绘制一个填充矩形   
  2. context.fillRect(x, y, width, height)   
  3. //绘制一个边框矩形   
  4. context.strokeRect(x, y, width, height)   
  5. //清除一个矩形区域   
  6. context.clearRect(x, y, width, height)  

2.2.2 线条
绘制线条与绘制图形有一些区别,线条实际上称为路径。要绘制一条简单的路径,首先必须调用beginPath方法,接着调用moveTo设置路径的起点坐标,然后调用lineTo设置线段终点坐标(可多次设置),再调用closePath完成路径绘制。最后调用stroke绘制轮廓(或调用fill填充路径)。以下为例子:

JavaScript Code复制内容到剪贴板
  1. //示例   
  2. context.beginPath();    //开始路径   
  3. context.moveTo(40, 40);    //移动到点(40,40)   
  4. context.lineTo(300, 40);    //画线到点(300,30)   
  5. context.lineTo(40, 300);    //画线到点(40,300)   
  6. context.closePath();    //结束路径   
  7. context.stroke();    //绘制轮廓   
  8. //或者填充用context.fill();  

2.2.3 圆形
Canvas实际上并没有专门绘制圆形的方法,可以通过画圆弧来模拟圆形。由于圆弧是一种路径,所以画圆弧的API应该包含在beginPath和closePath之间。
2.3 样式
2.3.1 修改线条颜色

JavaScript Code复制内容到剪贴板
  1. var color;   
  2. //指定RGB值   
  3. color = "rgb(255, 0, 0)";   
  4. //指定RGBA值(最后一个参数为alpha值,取值0.0~1.0)   
  5. color = "rgba(255, 0, 0, 1)";   
  6. //指定16进制码   
  7. color = "#FF0000";   
  8. //用单词指定   
  9. color = "red";   
  10. //设置填充颜色   
  11. context.fillStyle = color;   
  12. //设置边框颜色   
  13. context.strokeStyle = color;  

2.3.2 修改线宽

JavaScript Code复制内容到剪贴板
  1. //指定线宽值   
  2. var value= 3;   
  3. //设置边框颜色   
  4. context.linewidth = value;  

2.4 绘制文本

JavaScript Code复制内容到剪贴板
  1. //指定字体样式   
  2. context.font = "italic 30px 黑体";   
  3. //在点(40,40)处画文字   
  4. context.fillText("Hello world!", 40, 40);  

2.5 绘制图像
在绘制图像之前,需要先定义图像并加载。

CSS Code复制内容到剪贴板
  1. var img = new Image();   
  2. img.src = "myImage.png";   
  3. img.onload = function () {   
  4.     //图像加载完毕执行   
  5. };  

以下是drawImage API解释:

JavaScript Code复制内容到剪贴板
  1. //在(x,y)出绘制图像image   
  2. context.drawImage(image, x, y)   
  3. //在(x,y)出绘制width*height的图像image   
  4. context.drawImage(image, x, y, width, height)   
  5. //在image的(sx,sy)处截取sWidth*sHeight的图像,在(dx,dy)处绘制dWidth*dHeight的图像   
  6. context.drawImage(image, sx, sy, sWidth, sHeight, dx, dy, dWidth, dHeight)  

3. 高级功能
3.1 使Canvas填满浏览器窗口
最简单的方式是将canvas元素的宽度和高度精确设置为浏览器窗口的宽度和高度,用CSS消去白色空隙。
CSS代码:

CSS Code复制内容到剪贴板
  1. * {   
  2.     margin: 0;   
  3.     padding: 0;   
  4. }   
  5.   
  6. html, body {   
  7.     height: 100%;   
  8.     width: 100%;   
  9. }   
  10.   
  11. canvas {   
  12.     displayblock;   
  13. }  

Javascript代码:

JavaScript Code复制内容到剪贴板
  1. function resizeCanvas() {   
  2.     //canvas由jQuery获取   
  3.     canvas.attr("width", $(window).get(0).innerWidth);   
  4.     canvas.attr("height", $(window).get(0).innerHeight);   
  5.     context.fillRect(0, 0, canvas.width(), canvas.height());   
  6. }   
  7. $(window).resize(resizeCanvas);   
  8. resizeCanvas();  

3.2 绘图状态
在canvas中,绘图状图指的是描述某一时刻2D渲染上下文外观的整套属性,包括:变换矩阵、裁剪区域、globalAlpha、globalCompositeOperation、strokeStyle、fillStyle、lineWidth、lineCap、lineJoin、miterLimit、shadowOffsetX、shadowOffsetY、shadowBlur、shadowColor、font、textAlign和textBaseline。
当需要改变画布全局状态时,一般先将当前状态保存起来——调用save方法将状态推入绘图状态栈),做完操作之后,再调用restore方法回复绘图状态。

JavaScript Code复制内容到剪贴板
  1. //示例   
  2. context.save();   
  3. context.globalAlpha = 0.5;   
  4. context.fillRect(0, 0, 200, 100);   
  5. context.restore();  

3.3 变形
3.3.1 平移
将2D渲染上下文的原点从一个位置移动到另一个位置。注意,这里移动的是坐标原点即全局绘图位置,API如下:

JavaScript Code复制内容到剪贴板
  1. //将坐标原点移动到(x,y)   
  2. context.translate(x, y)  

3.3.2 缩放

JavaScript Code复制内容到剪贴板
  1. //将全局横纵尺寸缩放至x,y倍(即在原有数值乘上倍乘因子)   
  2. context.scale(x, y)  

3.3.3 旋转

JavaScript Code复制内容到剪贴板
  1. //将画布绕着原点旋转radius弧度   
  2. context.rotate(radius)  
HTML / CSS 相关文章推荐
CSS3对图片照片进行边缘模糊处理的实现
Aug 08 HTML / CSS
HTML5和CSS3让网页设计提升到下一个高度
Aug 14 HTML / CSS
移动Web—CSS为Retina屏幕替换更高质量的图片
Dec 24 HTML / CSS
分享30个新鲜的CSS3打造的精美绚丽效果(附演示下载)
Dec 28 HTML / CSS
css3中单位px,em,rem,vh,vw,vmin,vmax的区别及浏览器支持情况
Dec 06 HTML / CSS
用CSS3和table标签实现一个圆形轨迹的动画的示例代码
Jan 17 HTML / CSS
使用HTML5 Canvas API中的clip()方法裁剪区域图像
Mar 25 HTML / CSS
HTML5之SVG 2D入门4—笔画与填充
Jan 30 HTML / CSS
深入理解HTML的FormData对象
May 17 HTML / CSS
Html5之title吸顶功能
Jun 04 HTML / CSS
canvas 绘图时位置偏离的问题解决
Sep 16 HTML / CSS
css position fixed 左右双定位的实现代码
Apr 29 HTML / CSS
html5 canvas绘制矩形和圆形的实例代码
Jun 16 #HTML / CSS
浅谈html5增强的页面元素
Jun 14 #HTML / CSS
HTML5 新标签全部总汇(推荐)
Jun 13 #HTML / CSS
HTML最新标准HTML5总结(必看)
Jun 13 #HTML / CSS
HTML5通用接口详解
Jun 12 #HTML / CSS
html5表单及新增的改良元素详解
Jun 07 #HTML / CSS
10个最常见的HTML5面试题 附答案
Jun 06 #HTML / CSS
You might like
短波收音机简介
2021/03/01 无线电
PHP写的加密函数,支持私人密钥(详细介绍)
2013/06/09 PHP
php中替换字符串中的空格为逗号','的方法
2014/06/09 PHP
Laravel 框架返回状态拦截代码
2019/10/18 PHP
Laravel jwt 多表(多用户端)验证隔离的实现
2019/12/18 PHP
jquery应该如何来设置改变按钮input的onclick事件
2012/12/10 Javascript
Extjs 3.3切换tab隐藏相应工具栏出现空白解决
2013/04/02 Javascript
JavaScript实现列表分页功能特效
2015/05/15 Javascript
JQuery手速测试小游戏实现思路详解
2016/09/20 Javascript
浅谈在js传递参数中含加号(+)的处理方式
2016/10/11 Javascript
JavaScript获取当前时间向前推三个月的方法示例
2017/02/04 Javascript
微信小程序开发图片拖拽实例详解
2017/05/05 Javascript
Require.JS中的几种define定义方式示例
2017/06/01 Javascript
npm国内镜像 安装失败的几种解决方案
2017/06/04 Javascript
JS实现定时任务每隔N秒请求后台setInterval定时和ajax请求问题
2017/10/15 Javascript
浅谈vue-cli加载不到dev-server.js的解决办法
2017/11/24 Javascript
Vue实现web分页组件详解
2017/11/28 Javascript
使用Vue自定义数字键盘组件(体验度极好)
2017/12/19 Javascript
Vue+mui实现图片的本地缓存示例代码
2018/05/24 Javascript
Vue 全家桶实现移动端酷狗音乐功能
2018/11/16 Javascript
vue.js中导出Excel表格的案例分析
2019/06/11 Javascript
js/jQuery实现全选效果
2019/06/17 jQuery
vue+element树组件 实现树懒加载的过程详解
2019/10/21 Javascript
如何使用JavaScript检测空闲的浏览器选项卡
2020/05/28 Javascript
Python查找函数f(x)=0根的解决方法
2015/05/07 Python
Python 常用模块 re 使用方法详解
2019/06/06 Python
python关于矩阵重复赋值覆盖问题的解决方法
2019/07/19 Python
Python拆分大型CSV文件代码实例
2019/10/07 Python
李维斯德国官方网上商店:Levi’s德国
2016/09/10 全球购物
中间件分为哪几类
2016/09/18 面试题
教师专业自荐书范文
2014/02/10 职场文书
2015财务年度工作总结范文
2015/05/04 职场文书
2015年防汛工作总结
2015/05/15 职场文书
消防演习感想
2015/08/10 职场文书
感恩老师主题班会
2015/08/12 职场文书
2016年度基层党建工作公开承诺书
2016/03/25 职场文书