HTML5新功能之四 《canvas绘制》
2014-01-17 00:18 臭小子1983 阅读(592) 评论(0) 编辑 收藏 举报一、canvas基础
一、canvas要学习的内容
1、canvas绘制基本图型
2、使用路径的方法,绘制多边型和圆型
3、渐变图型、图型的缩放、图型的组合、绘制阴影
4、在画布中绘制图像、制作图像、平铺图像、裁剪图像
5、在画布绘制文字、给文字加边框
6、如何保存及恢复绘图状态,在画布中制作简单的动画方法
小整理
1、默认canvas尺寸:300 x 150
2、设置宽高,要在行间设置
<canvas id="can" width="500" height="300"></canvas>
3、当绘制一个方块1px边线,浏览时会出现两个像素的边线,是因为绘制的像素点会向两侧扩散0.5个像素,浏览时0.5会变成1加一起就两像素
解决方法:oContext.strokeRect(20.5, 20.5, 150, 100);
注意:执行canvase时需要在文档加载完后在加载js文件,否则会提示没有context()方法。
二、canvas属性:
var oContext = canvas.context("2d");
1、fillStyle:填充颜色 oContext.fillStyle = "#eeeeff";
2、storkeStyle:边框颜色 oContext.storkeStyle = "#ccc",
3、lineWidth:边框线的宽度 oContext.lineWidth = 1;
4、shadowColor:阴影颜色 oContext.shadowColor = "#000";
三、canvas属性和方法:
1、浏览器支持
Internet Explorer 9、Firefox、Opera、Chrome 以及 Safari 支持 <canvas> 及其属性和方法。
注释:Internet Explorer 8 以及更早的版本不支持 <canvas> 元素。
2、颜色、样式和阴影
属性 | 描述 |
---|---|
fillStyle | 设置或返回用于填充绘画的颜色、渐变或模式 |
strokeStyle | 设置或返回用于笔触的颜色、渐变或模式 |
shadowColor | 设置或返回用于阴影的颜色 |
shadowBlur | 设置或返回用于阴影的模糊级别 |
shadowOffsetX | 设置或返回阴影距形状的水平距离 |
shadowOffsetY | 设置或返回阴影距形状的垂直距离 |
方法 | 描述 |
---|---|
createLinearGradient() | 创建线性渐变(用在画布内容上) |
createPattern() | 在指定的方向上重复指定的元素 |
createRadialGradient() | 创建放射状/环形的渐变(用在画布内容上) |
addColorStop() | 规定渐变对象中的颜色和停止位置 |
3、线条样式
属性 | 描述 |
---|---|
lineCap | 设置或返回线条的结束端点样式 |
lineJoin | 设置或返回两条线相交时,所创建的拐角类型 |
lineWidth | 设置或返回当前的线条宽度 |
miterLimit | 设置或返回最大斜接长度 |
5、路径
方法 | 描述 |
---|---|
fill() | 填充当前绘图(路径) |
stroke() | 绘制已定义的路径 |
beginPath() | 起始一条路径,或重置当前路径 |
moveTo() | 把路径移动到画布中的指定点,不创建线条 |
closePath() | 创建从当前点回到起始点的路径 |
lineTo() | 添加一个新点,然后在画布中创建从该点到最后指定点的线条 |
clip() | 从原始画布剪切任意形状和尺寸的区域 |
quadraticCurveTo() | 创建二次贝塞尔曲线 |
bezierCurveTo() | 创建三次方贝塞尔曲线 |
arc() | 创建弧/曲线(用于创建圆形或部分圆) |
arcTo() | 创建两切线之间的弧/曲线 |
isPointInPath() | 如果指定的点位于当前路径中,则返回 true,否则返回 false |
6、转换
方法 | 描述 |
---|---|
scale() | 缩放当前绘图至更大或更小 |
rotate() | 旋转当前绘图 |
translate() | 重新映射画布上的 (0,0) 位置 |
transform() | 替换绘图的当前转换矩阵 |
setTransform() | 将当前转换重置为单位矩阵。然后运行 transform() |
7、文本
属性 | 描述 |
---|---|
font | 设置或返回文本内容的当前字体属性 |
textAlign | 设置或返回文本内容的当前对齐方式 |
textBaseline | 设置或返回在绘制文本时使用的当前文本基线 |
方法 | 描述 |
---|---|
fillText() | 在画布上绘制“被填充的”文本 |
strokeText() | 在画布上绘制文本(无填充) |
measureText() | 返回包含指定文本宽度的对象 |
9、像素操作
属性 | 描述 |
---|---|
width | 返回 ImageData 对象的宽度 |
height | 返回 ImageData 对象的高度 |
data | 返回一个对象,其包含指定的 ImageData 对象的图像数据 |
方法 | 描述 |
---|---|
createImageData() | 创建新的、空白的 ImageData 对象 |
getImageData() | 返回 ImageData 对象,该对象为画布上指定的矩形复制像素数据 |
putImageData() | 把图像数据(从指定的 ImageData 对象)放回画布上 |
11、其他
方法 | 描述 |
---|---|
save() | 保存当前环境的状态 |
restore() | 返回之前保存过的路径状态和属性 |
createEvent() | |
getContext() | |
toDataURL() | 将画布存储为图片,toDataURL(存储类型png、jpeg, 存储质量0-1); |
一、颜色和阴影
属性:
1、fillStyle:设置填充颜色
2、strokeStyle:边线的颜色
3、shadowColor:阴影颜色
4、shadowBlur:阴影模糊
5、shadowOffsetX:阴影距水平的距离
6、shadowOffsetY:阴影距垂直的距离
7、globalAlpha:全局透明度,可以指定画布上绘制的内容的透明度
方法:
1、createLinearGradient(开始点的x,开始点的y,结束点的x,结束点的y) :创建线性渐变(用在画布内容上)
2、createRadialGradient(x0, y0, r0, x1, y1, r1):创建镜像渐变
3、addColorStop(0, color): 规定渐变对象中的颜色和停止位置,第一个参数是开始点和结束点,是0-1之间的浮点数,第二个参数是颜色
4、createPattern(图片, 重复方向) :在指定的方向上重复指定的元素 createPattern(img,"repeat")
5、moveTo(x, y):线的起始位置
6、lineTo(x,y):线的结束位置 ,当画第二线的时候只需要加结束位置的x,y轴
7、stroke():绘制线条
8、fill():填充颜色,如果是画线时没有合并路径那会用Fill()来填充会自动将路径合并,并填充颜色
9、fillRect(x, y, w, h):画一个矩形
10、strokeRect(x, y, w, h):绘制矩形线条
11、clearRect(x, y, w, h):消除矩形
9、toDataURL():返回以data:为前缀的64编码表示的图像数据
var oContext = oCanvas.getContext("2d");
oSetPic = oContext.canvas.toDataURL('image/png');
console.log(oSetPic); // data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAlgAAAEsCAYAAAAfPc2WAAAQo0lEQ…BAgAABArGAwIpBjSNAgAABAgQICCw3QIAAAQIECBCIBf4DOKmXLbCHP3gAAAAASUVORK5CYII=
二、绘制线条
属性:
1、lineCap:返回线条的结束端样式
butt 默认。向线条的每个末端添加平直的边缘。
round 向线条的每个末端添加圆形线帽。
square 向线条的每个末端添加正方形线帽。
2、lineJoin:拆线的折点处的样式
bevel 创建斜角。
round 创建圆角。
miter 默认。创建尖角。
3、lineWidth:线条粗细
4、miterLimit :最大斜角度长
三、绘制矩形
1、rect(x, y, width, height):创建矩形
2、fillRect(x, y, width, height):绘制被填充矩形
3、storkRect(x, y, width, height):绘制矩形,无填充
4、clearRect(x, y, width, height):在给定的矩形内清除像素
1 <canvas id="canvas1" width="400px" height="75px"></canvas> 2 <script type="text/javascript"> 3 window.onload = function(){ 4 showCanvase("canvas1", 400, 75); 5 } 6 // 绘制矩形 7 function showCanvase(oId, w, h){ 8 var canvas = document.getElementById(oId); 9 var context= canvas.getContext('2d'); 10 11 context.fillStyle = "#fff"; 12 context.strokeStyle = "#ccc"; 13 context.lineWidth = 1; 14 context.fillRect(0, 0, w, h); 15 context.strokeRect(0, 0, w, h); 16 } 17 </script>
四、路径
1、moveTo(x, y):绘制直线起点的坐标
2、lineTo(x, y):绘制直线终点的坐标
3、fill():填充当前绘制
4、beginPath()、closePath():开始和结束一路径
5、storke():绘制定义的路径
6、clip():从原始画布剪切任意形状和尺寸的区域
-----------------------------------------------------------------------------------------------------
四、使用路径
1、开始创建路径,beginPath();
2、创建图形的路径,arc(x, y, 圆形半径,开始的角度, 结束角度, 是否按顺时针方向绘制ture为顺)
3、路径创建完成后,关闭路径closePath();
4、设定绘制样式,调用绘制方法,绘制路径fileStyle
六、画线moveTo和lineTo
1 <canvas id="canvas1" width="400px" height="76px"></canvas> 2 <script type="text/javascript"> 3 window.onload = function(){ 4 showCanvase("canvas1", 400, 76); 5 } 6 // 绘制矩形 7 function showCanvase(oId, w, h){ 8 var canvas = document.getElementById(oId); 9 var context= canvas.getContext('2d'); 10 // 背景矩形 11 context.fillStyle = "#fff"; 12 context.strokeStyle = "#ccc"; 13 context.lineWidth = 1; 14 context.fillRect(0, 0, w, h); 15 context.strokeRect(0, 0, w, h); 16 17 // 绘制两条线 18 for(var i=1; i<3; i++){ 19 context.beginPath(); 20 context.lineWidth = 1; 21 context.moveTo(0, h/3 * i); // moveTo线的起始位置x,y轴 22 context.lineTo(w, h/3 * i); // lineTo线的结束位置x,y轴 23 context.stroke(); 24 } 25 } 26 </script>
七、绘制渐变图形
1、绘制线性渐变
createLinearGradient(xStart, yStart, xEnd, yEnd);
二、IE下使用excanvas.js之后动态创建的canvas不支持getContext的解决方法
引入excanvas.js以后,在ie下,文档中的canvas就可以用了,但是如果是通过createElement方法创建的就不行了
1 var canvas=document.createElement(”canvas”); 2 if(canvas.getContext){ 3 alert(”support getContext()”); 4 }
这段代码在ie下不工作,于是把google搞的这个让ie支持canvas的代码大概地读了一遍,知道了是怎么回事。将代码放到aptana里面看,10分钟不到,785行代码,还不错,我想,这得益于之前仔细看过犀牛书前面js core部分7遍以及对canvas和vml的了解吧。
原来,加载并执行excanvas.js这个脚本代码的时候,G_vmlCanvasManager_.init();这句语句遍历了页面中所有的canvas元素,然后初始化这些元素,亦即是将标准canvas的那些个方法赋予ie下的canvas:
1 var els = doc.getElementsByTagName(”canvas”); 2 for (var i = 0; i < els.length; i++) { 3 if (!els[i].getContext) { 4 this.initElement(els[i]); 5 } 6 }
如果是文档原来就有的canvas标签,那就没有问题,这段脚本将找到的canvas元素作为参数传递给G_vmlCanvasManager_.initElement()这个方法。但是通过createElement方法创建的canvas就不行了,因为调用这段脚本的时候,后来新创建的canvas元素还没有被它找到。
那么,解决办法就是新创建了一个canvas元素就调用G_vmlCanvasManager_.initElement()方法来初始化。
但是,G_vmlCanvasManager_是在一个匿名函数function(){}里面定义的,我在全局范围下就没有办法引用到,还好,在excanvas.js文件的后面,有一句语句,G_vmlCanvasManager = G_vmlCanvasManager_;
由于js的函数中,如果一个变量不通过var来定义,那么就会把这个变量当作一个全局变量,好啦,现在有一个全局变量来引用它了。
那么,下面是解决问题的代码:
1 $(function(){ 2 var canvas=document.createElement(”canvas”); 3 document.body.appendChild(canvas); 4 if($.browser.msie){ 5 canvas=window.G_vmlCanvasManager.initElement(canvas); 6 } 7 if(canvas.getContext){alert(”support”);} 8 });
这里我用了jquery,在DOM ready以后才执行这段脚本。
另外,记得canvas=window.G_vmlCanvasManager.initElement(canvas);之前要将新创建好的canvas追加到文档流中:document.body.appendChild(canvas);