标签：logs yellow 环境 nload ima 图片加载 repeat src square
canvas的尺寸在内部设置，CSS里设置会被缩放；
lineWidth=10;描边宽度，以中间向两侧绘制；
绘制线段：
moveTo,lineTo,strokeStyle,stroke(),beginPath()
示例：
<script>
var c = document.getElementById("myCanvas");
var ctx = c.getContext("2d");
ctx.moveTo(0,0);
ctx.lineTo(150,50);
ctx.lineTo(20,100);
ctx.strokeStyle = "blue"; //设定描边颜色为蓝色
ctx.stroke();
ctx.beginPath(); //告诉canvas咱们要重新绘制一条全新的路径了，之前画的东西从此再无关系
ctx.moveTo(90,90);
ctx.lineTo(80,150);
ctx.strokeStyle = "red"; //设定描边颜色为红色
ctx.stroke();
</script>
strokeStyle的三种赋值方式：
（1）颜色值
（2）渐变
线性渐变：createLinearGradient(x1,y1,x2,y2)
径向渐变：createRadiaGradient(x1,y1,r1,x2,y2,r2)
addColorStop(位置，颜色)
示例：
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(); //描边
（3）图案描边
示例：
<canvas id="myCanvas" width="200" height="200" style="border:solid 1px #CCC; margin:30px;">
您的浏览器不支持canvas，建议使用最新版的Chrome
</canvas>
<script>
var c = document.getElementById("myCanvas");
var ctx = c.getContext("2d");
pic = new Image(); //创建图片对象，或者 pic = document.createElement(‘img‘)
pic.src = "http://images.cnblogs.com/cnblogs_com/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();
}
</script>
线段属性：
⑴ lineCap是设定线段端点的形状（线帽），其值可以是
| butt 默认，即线条端点为平直的边缘 round 线条端点为圆角线帽 square 为线条端点添加正方形线帽 |
⑵ lineJoin则是设定折线的交接处的外角类型，其值可为：
|
miter 默认，折线交接处为尖角 round 折线交接处为圆角 bevel 折线交接处为斜角 |
绘制矩形：
ctx.fillRect(x, y, width, height) 和 ctx.strokeRect(x, y, width, height)
示例：
<canvas id="myCanvas" width="200" height="200" style="border:solid 1px #CCC;">
您的浏览器不支持canvas，建议使用最新版的Chrome
</canvas>
<script>
var c = document.getElementById("myCanvas");
var ctx = c.getContext("2d"); //获取该canvas的2D绘图环境对象
var grd = ctx.createRadialGradient(35,35,0,35,35,36); //定义放射状渐变对象，设定渐变线起始点和结束点坐标，坐标格式为(起始点x,起始点y,结束点x,结束点y)
grd.addColorStop(0,"yellow"); //定义渐变线起点颜色
grd.addColorStop(0.5,"blue"); //定义渐变线中间点的颜色
grd.addColorStop(1,"red"); //定义渐变线结束点的颜色
ctx.fillStyle = grd; //将放射状渐变对象赋值给fillStyle
ctx.fillRect(10,10,50,50); //从画布上的(10,10)坐标点为起始点，绘制一个宽高均为50px的实心矩形
ctx.beginPath(); //重置画笔，这是个好习惯
ctx.strokeStyle = "green"; //定义描边颜色为绿色
ctx.strokeRect(70,10,50,50); //从画布上的(70,10)坐标点为起始点，绘制一个宽高均为50px的描边矩形
</script>
示例：
var c = document.getElementById("myCanvas");
var ctx = c.getContext("2d"); //获取该canvas的2D绘图环境对象
ctx.fillStyle = "blue";
ctx.fillRect(10,20,60,60);
//下面通过clearRect来擦除画布
ctx.clearRect(0,0,c.width,c.height);
//重新绘制一个矩形
ctx.fillRect(10,20,60,60);
这样可以保持之前定义的样式
用 ctx.closePath()闭合路径
示例：
var c = document.getElementById("myCanvas");
var ctx = c.getContext("2d"); //获取该canvas的2D绘图环境对象
//定义样式
ctx.fillStyle = "blue";
ctx.strokeStyle = "red";
ctx.lineWidth = "8";
ctx.lineJoin = "round";
//绘制多边形
ctx.moveTo(10,10);
ctx.lineTo(100,30);
ctx.lineTo(120,80);
ctx.lineTo(60,60);
ctx.lineTo(10,10);
ctx.closePath(); //闭合多边形路径
ctx.stroke(); //描边
ctx.fill(); //填充
标签：logs yellow 环境 nload ima 图片加载 repeat src square
原文地址：http://www.cnblogs.com/bolala/p/7456388.html
