html5使用Canvas绘图的使用方法_H5之家 - 中国HTML5教程资源分享第一站

时间:2017-11-24来源: 作者:源码库文章热度: ℃

一、什么是Canvas

Canvas 是H5的一部分，允许脚本语言动态渲染图像。Canvas 定义一个区域，可以由html属性定义该区域的宽高，javascript代码可以访问该区域，通过一整套完整的绘图功能（API）,在网页上渲染动态效果图。

二、Canvas 能做什么

游戏：毫无疑问，游戏在HTML5领域具有举足轻重的地位。HTML5在基于Web的图像显示方面比Flash更加立体、更加精巧。

图表制作：图表制作时常被人们忽略，但无论企业内部还是企业间交流合作都离不开图表。现在一些开发者使用HTML/CSS完成图标制作。当然，使用SVG（可缩放矢量图形）来完成图表制作也是非常好的方法。

字体设计：对于字体的自定义渲染将完全可以基于Web，使用HTML5技术进行实现。

图形编辑器：图形编辑器能够100%基于Web实现。

其他可嵌入网站的内容：类似图表、音频、视频，还有许多元素能够更好地与Web融合，并且不需要任何插件。

三、Canvas基本用法

1、使用<canvas>必须先设置其width和height属性，指定可绘图区域大小,只指定宽高不添加样式或者绘制图像的话，在页面中将看不到该元素。

2、绘制图像的话，我们首先要取到canvas并调用getContext()方法，然后传入上下文名字（2D/3D）,2D有两种基本绘图操作|填充(fillStyle)|描边(strokeStyle)|，这两个属性默认值为#000

var draw = document.getElementById('draw'); //确认浏览器是否支持<canvas>元素 if(draw.getContext){ var context = draw.getContext('2d'); //给context绘制红色的边框 context.strokeStyle = '#f00'; //内部填充大草原的颜色 context.fillStyle = '#0f0'; }

3、使用toDataURL()方法，可以导出<canvas>元素上绘制的图像

var draw = document.getElementById('draw'); if(draw.getContext){ //显示图像，toDataURL()获取到的是一串base64的字符串 var drawURL = draw.toDataURL('image/png'); var image = document.createElement('img'); image.src = drawURL; document.body.appendChild(image); }

4、绘制矩形，主要有三个方法，fillRect()为矩形填充颜色、strokeRect()为矩形描边、clearRect()清除矩形。这三个方法都接收4个参数x/y/w/h，矩形的左上角坐标和宽高

var draw = document.getElementById('draw'); //确认浏览器是否支持<canvas>元素 if(draw.getContext){ var context = draw.getContext('2d'); //绘制红色矩形,绿色描边 context.fillStyle = '#f00'; context.strokeStyle = '#0f0'; context.strokeRect(10,10,50,50); context.fillRect(10,10,50,50); //绘制绿色矩形,红色描边 context.fillStyle = '#0f0'; context.strokeStyle = '#f00'; context.strokeRect(10,10,50,50); context.fillRect(10,10,50,50); //在两个矩形重叠的地方清除一个小矩形 context.clearRect(40,40,10,10); }

5、绘制路径，通过路径可以创造出复杂的形状和线条，要绘制路径，首先要调用beginPath()方法，再通过以下方法来实际的绘制路径

arc(x,y,radius,startAngle,endAngle,conterclockwise)
(x,y)圆心坐标、radius半径、(startAngle,endAngle)起始角度和终止角度、conterclockwise顺时针(false)/逆时针(true)

moveTo(x,y) 将游标移动到(x,y)，不画线。可以用来修改所谓的上一点坐标*

arcTo(x1,y1,x2,y2,radius)
从上一点开始绘制一条曲线到(x2,y2),并且以给定的radius穿过(x1,y1)

lineTo(x,y) 从上一点开始绘制一条直线，到(x,y)

rect(x,y,width,height)
从(x,y)开始绘制一个矩形，宽高为width、height。这个方法绘制的是矩形路径，而非strokeRect()和fillRect()所绘制的独立的形状

//接下来绘制一个不带数字的时钟 var draw = document.getElementById('draw'); if(draw.getContext){ var context = draw.getContext('2d'); //开始路径 context.beginPath(); //绘制外圆 context.arc(100,100,99,0,2*Math.PI,false); //绘制内圆 context.moveTo(194,100); context.arc(100,100,94,0,2*Math.PI,false); //绘制分针 context.moveTo(100,100); context.lineTo(100,15); //绘制时针 context.moveTo(100,100); context.lineTo(35,100); //描边路径 context.stroke(); context.strokeStyle = '#f00'; }

font文字样式，大小，字体等

//在表盘绘制12点 context.font = 'bold 12px Arial'; context.textAlign = 'center'; context.textBaseline = 'middle'; context.fillText('12',100,20);

7 . 变换

rotate(angel) 围绕原点旋转图像angle弧度

scale(scaleX,scaleY) 缩放图像，x*scaleX,y*scaleY 默认1

translate(x,y) 将坐标原点移动到(x,y)

var draw = document.getElementById('draw'); if(draw.getContext){ var context = draw.getContext('2d'); //开始路径 context.beginPath(); //绘制外圆 context.arc(100,100,99,0,2*Math.PI,false); //绘制内圆 context.moveTo(194,100); context.arc(100,100,94,0,2*Math.PI,false); //变换原点 context.translate(100,100); //旋转表针 context.rotate(1) //绘制分针 context.moveTo(0,0); context.lineTo(0,-85); //绘制时针 context.moveTo(0,0); context.lineTo(-65,0); //描边路径 context.stroke(); context.strokeStyle = '#f00'; }

8 . 绘制图像，drawImage()

var img = document.getElementByTagNames('image')[0]; context.drawImage(img,0,10,50,50,0,100,40,60);

9个参数: 要绘制的图像原图像|x|y|w|h| 目标图像|x|y|w|h|

9 . 阴影和渐变