(HTML5 )canvas 第九章

前言：

好像有很久没看这本书了,数要到期了，自己还没有看完！所以，在下个礼拜之前一定要把这本书看完。

绘制图像

context.drawImage(img,0,0)

裁剪、切割和伸缩图片

context.drawImage(img,0,0,20,30)//本来40,60的图片，缩小成20,30 的图片

context.drawImage(img,0,0,30,50,75,75,30,50)//本来40,60的图片先截取30,50，然后放在(75,75)坐标处

绘制文本

但是我觉得没有必要再canvas里面绘制文本，书中也提出体重优化性能的方法，先生成文本图片，再加载到canvas当中，然后对文本做交互操作

fillText//实心

strokeText+lineWdith//轮廓

文本处理时，每一次context.fillText操作只能写一行文本，所以要自己设计单词折行算法,可参考http://tinyurl.com/6ec7hld

阴影与填充

效果：阴影与形状、图片和文本一样。

相关属性：

shadowColor\shadowBlur\shadowOffsetX\shadowOffsetY 

阴影颜色、阴影模糊程度、阴影相对内容的位置

 // Draw the shadowed star.  context.shadowOffsetX = 10;  context.shadowOffsetY = 10;  context.shadowBlur = 4;  img = document.getElementById("star");  context.drawImage(img, 250, 30);

填充图案

repeat-x/repeat-y/repeat

var pattern=context.createPattern(img,"repeat")

context.fillStyle=pattern;

填充渐变

var gradient=createLinearGradient(10,0,100,0)//创建一个从（10,0）到（100,0）的渐变线；渐变是水平的

  gradient.addColorStop("0","magenta");
  gradient.addColorStop(".25","blue");
  gradient.addColorStop(".50","green");
  gradient.addColorStop(".75","yellow");

  gradient.addColorStop("1.0","red");

  drawHeart(180, 230);
  context.fillStyle = gradient;
  context.fill();
  context.stroke();  

createRadialGradient(180,100,10,180,100,50)

//创建一个以（180,100）为圆心，10为内圆半径，50为外圆半径的放射性渐变线。注：圆心可以不同，从而实现拉伸、压缩的效果

一般来说，创建的渐变只要恰好笔要填充的图形大一点即可。

交互：

canvas是一种非保留型的绘图界面。不会记录过去执行的绘图操作，而只是保持最终结果。这个特性不利于交互。

所以我们要学会把已经绘制的信息保存起来。

对象声明：

function Ball(x,y,radius){

this.x=x;

this.y=y;

this.radius=radius;

}

创建数组，保存所有的ball

var balls=[]

接下来就是addBall了，在该函数里调用drawBall的代码

动画

基本思路：设置定时器（setTimeout/setInterval），调用绘制函数、重绘整个画布

碰撞检测；

由于canvas不像svg有相应的标签，所以绘制出来的图形与鼠标交互时，需要人工检测鼠标是否在对应的图形上面---碰撞检测。

补充知识：

1、canvas图形库

http://www.rgraph.net

http://www.zingchart.com 推荐这个网站，有很多统计图的api

2、心形图的画法，利用4个贝塞尔曲线

function drawHeart(x, y) {  context.beginPath();  context.moveTo(x, y);  context.bezierCurveTo(x, y - 40, x - 45, y - 40, x - 48, y);  context.bezierCurveTo(x - 45, y + 30, x, y + 40, x, y + 80);  context.bezierCurveTo(x, y + 90, x + 45, y + 40, x + 45, y);  context.bezierCurveTo(x + 45, y - 30, x, y - 30, x, y);  context.closePath();}

3、可以在一个页面画上多个canvas，此时，在每个canvas上写东西时，坐标都是相对这个canvas的。

4、清除画布的问题：contex.clearRect(0,0,canvas.width,canvas.height)

清除画布是在绘图逻辑执行完毕之后才清除或绘制所有内容的，因此可以把最终结果流畅不间断地复制到画布上。

5、

SVG 与 HTML5 的 canvas 各有什么优点，哪个更有前途？

Canvas

• 依赖分辨率
• 不支持事件处理器
• 弱的文本渲染能力
• 能够以 .png 或 .jpg 格式保存结果图像
• 最适合图像密集型的游戏，其中的许多对象会被频繁重绘

SVG

• 不依赖分辨率
• 支持事件处理器
• 最适合带有大型渲染区域的应用程序（比如谷歌地图）
• 复杂度高会减慢渲染速度（任何过度使用 DOM 的应用都不快）
• 不适合游戏应用

总结来w3shool.