前言:
好像有很久没看这本书了,数要到期了,自己还没有看完!所以,在下个礼拜之前一定要把这本书看完。
绘制图像
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(".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.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 各有什么优点,哪个更有前途?
- 依赖分辨率
- 不支持事件处理器
- 弱的文本渲染能力
- 能够以 .png 或 .jpg 格式保存结果图像
- 最适合图像密集型的游戏,其中的许多对象会被频繁重绘
- 不依赖分辨率
- 支持事件处理器
- 最适合带有大型渲染区域的应用程序(比如谷歌地图)
- 复杂度高会减慢渲染速度(任何过度使用 DOM 的应用都不快)
- 不适合游戏应用