玩转html5<canvas>画图

导航

前言

基本知识

绘制矩形

清除矩形区域

圆弧

路径

绘制线段

绘制贝塞尔曲线

线性渐变

径向渐变（发散）

图形变形（平移、旋转、缩放）

矩阵变换（图形变形的机制）

图形组合

给图形绘制阴影

绘制图像（图片平铺、裁剪、像素处理[不只图像、包括其他绘制图形]）

绘制文字

保存和恢复状态（context）

保存文件

结合setInterval制作动画

结语、demo下载

前言

<canvas></canvas>是html5出现的新标签，像所有的dom对象一样它有自己本身的属性、方法和事件，其中就有绘图的方法，js能够调用它来进行绘图 ，最近在研读《html5与css3权威指南》下面对其中最好玩的canvas的学习做下读书笔记与实验。

温馨提示：以下所有实验请使用最新版的opera

顶部

基本知识

context:一直觉得这个翻译成“上下文”真够蛋疼的，context是一个封装了很多绘图功能的对象，获取这个对象的方法是

var context =canvas.getContext("2d");

也许这个2d勾起了大家的无限遐想，但是很遗憾的告诉你html5还只是个少女，不提供3d服务。

canvas元素绘制图像的时候有两种方法，分别是

context.fill()//填充

context.stroke()//绘制边框

style:在进行图形绘制前，要设置好绘图的样式

context.fillStyle//填充的样式

context.strokeStyle//边框样式

context.lineWidth//图形边框宽度

颜色的表示方式:

直接用颜色名称:"red" "green" "blue"

十六进制颜色值: "#EEEEFF"

rgb(1-255,1-255,1-255)

rgba(1-255,1-255,1-255,透明度)

和GDI是如此的相像，所以用过GDI的朋友应该很快就能上手

顶部

绘制矩形 context.fillRect(x,y,width,height) strokeRect(x,y,width,height)

x:矩形起点横坐标（坐标原点为canvas的左上角，当然确切的来说是原始原点，后面写到变形的时候你就懂了，现在暂时不用关系）

y:矩形起点纵坐标

width:矩形长度

height:矩形高度

View Code
View Code
View Code
一不小心画了小日本的国旗...赶紧调下颜色和大小，绿色倒是挺合适的~

View Code
实验结果如下：

View Code
View Code
View Code
View Code
View Code
View Code
View Code
由于（平移，缩放，旋转）和（平移，旋转，缩放）一样

（缩放，选装，平移）和（旋转，缩放，平移）一样

所以实验结果只能看到“4”中情况，其实是有两种情况被覆盖了

View Code
结果是动态的切换各种组合

View Code
View Code
View Code
三个方法的运行结果如下：

View Code
View Code
View Code
View Code
View Code
顶部View Code
View Code



顶部

结语

历时一天半，本来以为可以玩转的，写下来才发现要玩转canvas还需要很多的实践，这个道理应该是适用所有的技术的，做人啊，就得谦虚点。本文如有错误，请及时留言给我纠正，希望能给正在学canvas绘图的童鞋有所帮助

copyright © Tim demo下载

顶部