画布 canvas
初始化
<canvas id="myCanvas" width="200" height="200" border="1"></canvas>
<script>
var c = document.getElementById("myCanvas");
//c.width=200;
//c.height=200;
</script>画线
<canvas id="myCanvas" width="400" height="400" style="border:2px solid #eee"></canvas>
<script>
var c = document.getElementById("myCanvas"); //获取要操作的canvas
var ctx = c.getContext("2d"); //获取该canvas的2D绘图环境对象
ctx.moveTo(10,10); //定义绘画开始的位置
ctx.lineTo(150,50); //画一条直线，结束点坐标是x=150,y=50
ctx.stroke(); //描边
</script>stroke描边
描边加颜色
ctx.strokeStyle = "red"; //设定描边颜色为红色，只要写在.stroke()方法前面即可
ctx.stroke(); //描边图案描边
var c = document.getElementById("myCanvas");
var ctx = c.getContext("2d");
pic = new Image(); //创建图片对象，或者 pic = document.createElement('img')
pic.src = "http://test.com/a.jpg"; //定义图片的映射地址
var redTexture = ctx.createPattern(pic, "repeat"); //定义Pattern对象，设定填充图案为pic图片，填充形式为平铺
ctx.strokeStyle = redTexture; //定义描边样式为上一行设定的Pattern描边
ctx.moveTo(80,10);
ctx.lineTo(10,90);
ctx.stroke();预先加载图片
var c = document.getElementById("myCanvas");
var ctx = c.getContext("2d");
pic = new Image(); //创建图片对象，或者 pic = document.createElement('img')
pic.src = "http://images./vajoy/558870/o_5.jpg";
pic.onload = patternFill; //在图片加载完成时执行绘图函数
function patternFill() { //定义绘图函数
var redTexture = ctx.createPattern(pic, "repeat");
ctx.strokeStyle = redTexture;
ctx.moveTo(80,10);
ctx.lineTo(10,90);
ctx.lineWidth = 8; //定义线段粗度为8像素
ctx.stroke();
}定义路径，重新开始一条路径
ctx.beginPath();渐变gradient
var c = document.getElementById("myCanvas");
var ctx = c.getContext("2d");
ctx.moveTo(0,0);
ctx.lineTo(150,50);
ctx.lineTo(20,100);
var grd = ctx.createLinearGradient(0,0,170,0); //定义线性渐变对象，设定渐变线起始点和结束点坐标，坐标格式为(起始点x,起始点y,结束点x,结束点y)
grd.addColorStop(0,"black"); //定义渐变线起点颜色
grd.addColorStop(0.5,"red"); //定义渐变线中间点的颜色
grd.addColorStop(1,"yellow"); //定义渐变线结束点的颜色
ctx.strokeStyle = grd; //将渐变对象赋值给strokeStyle
ctx.stroke(); //描边放射性渐变
function draw() {
var canvas = document.getElementById('canvas');
var context = canvas.getContext('2d');
var gradient = context.createRadialGradient(
canvas.width/2,canvas.height,10,
canvas.width/2,0,100);
gradient.addColorStop(0,'blue');
gradient.addColorStop(0.25,'white');
gradient.addColorStop(0.5,'purple');
gradient.addColorStop(0.75,'red');
gradient.addColorStop(1,'yellow');
context.fillStyle=gradient;
context.rect(0,0,canvas.width,canvas.height);
context.fill();
}线段属性
ctx.lineJoin
- bevel
- round
- miter
图像
drawImage
<img id="scream" src="a.jpg" alt="The Scream" width="220" height="277"><p>Canvas:</p>
<canvas id="myCanvas" width="250" height="300" style="border:1px solid #d3d3d3;">
您的浏览器不支持 HTML5 canvas 标签。</canvas>
<script>
var c=document.getElementById("myCanvas");
var ctx=c.getContext("2d");
var img=document.getElementById("scream");
img.onload = function() {
ctx.drawImage(img,10,10);
}
</script>阴影
在canvas之中进行绘制时，不管要画的是图形、文本，还是图像，都可以通过修改绘图环境中的如下4个属性值来指定阴影效果：
- shadowColor：CSS3格式的颜色
- shadowOffsetX：从图形或文本到阴影的水平像素偏移
- shadowOffsetY：从图形或文本到阴影的垂直像素偏移
- shadowBlur：一个与像素无关的值。该值被用于高斯模糊方程之中，以便对阴影进行模糊化处理。
绘制阴影还需要满足条件：
1. 指定的shadowColor值不是全透明的
2. 在其余的阴影属性之中，存在一个非0的值。
示例：
function draw() {
var canvas = document.getElementById('canvas');
var ctx = canvas.getContext('2d');
ctx.save();
ctx.fillStyle = '#EB852A';
ctx.shadowOffsetX = 15; // 阴影Y轴偏移
ctx.shadowOffsetY = 15; // 阴影X轴偏移
ctx.shadowBlur = 14; // 模糊尺寸
ctx.shadowColor = 'rgba(0, 0, 0, 0.5)'; // 颜色
ctx.beginPath();
ctx.arc(150, 150, 75, 0, 2 * Math.PI, false);
ctx.fill();
ctx.restore();
ctx.fillStyle = '#222222';
ctx.beginPath();
ctx.arc(350, 150, 75, 0, 2 * Math.PI, false);
ctx.fill();
}填充
矩形填充，使用fillRect()、strokeRect() 方法，会立即绘制。然而大部分Canvas绘图环境中的方法都不是立即绘制的。
大多数绘图系统，如Scalable Vector Graphics、Apple的Cocoa框架，以及Adobe Illustrator等，都是基于路径的。使用这些绘制系统时，需要先定义一个路径，然后再对其进行描边或填充，也可以在描边的同时进行填充。
填充路径时，会使用“非零环绕规则”：对于路径中的任意给定区域，从该区域内部画一条足够长的线段，使此线段终点完全落在路径范围之外，然后计数，线段每与路径上的线相交，就改变计数器的值，顺时针相交就加1，逆时针相交就减1.最终计数器值不是0，此区域就在路径里面，fill()就会对其填充。
参考：
http://www.runoob.com/html/html5-canvas.html
方法属性列表：
http://www.w3school.com.cn/tags/html_ref_canvas.asp
