HTML5的学习之canvas画布
这篇文章我么继续学习canvas画布。学习学习canvas画布线条的颜色，渐变，阴影等属性和方法。
属性
1.颜色属性
| 属性 | 描述 |
| fillStyle | 设置或返回用于填充绘画的颜色、渐变或模式。 |
| strokeStyle | 设置或返回用于笔触的颜色、渐变或模式。 |
2.阴影属性
| 属性 | 描述 |
| shadowColor | 设置或返回用于阴影的颜色。 |
| shadowBlur | 设置或返回用于阴影的模糊级别。 |
| shadowOffsetX | 设置或返回阴影与形状的水平距离。 |
| shadowOffsetY | 设置或返回阴影与形状的垂直距离。 |
3.线条样式属性
| 属性 | 描述 |
| lineCap | 设置或返回线条的结束端点样式。 |
| lineJoin | 设置或返回两条线相交时，所创建的拐角类型。 |
| lineWidth | 设置或返回当前的线条宽度。 |
| miterLimit | 设置或返回最大斜接长度。 |
方法
1.渐变方法
| 方法 | 描述 |
| createLinearGradient() | 创建线性渐变（用在画布内容上）。 |
| createPattern() | 在指定的方向上重复指定的元素。 |
| createRadialGradient() | 创建放射状/环形的渐变（用在画布内容上）。 |
| addColorStop() | 规定渐变对象中的颜色和停止位置。 |
HTML代码：
<canvasid="my_canvas"></canvas>
JavaScript代码：
// 1.获取元素varoCanvas=document.getElementById("my_canvas"); // 2.设置画布的大小oCanvas.width="1000"; oCanvas.height="1000"; // 3.设置画布环境 getContext()varmyCanvas=oCanvas.getContext("2d"); // 方法 矩形// rect(x,y,width,height) 创建矩形。// myCanvas.rect(100, 100, 200, 200);// myCanvas.stroke(); //绘制已经定义的路径// strokeRect(x,y,width,height) 绘制矩形（无填充）。// myCanvas.strokeRect(0, 320, 200, 200);// fillRect(x,y,width,height); 绘制"被填充"的矩形。// myCanvas.fillRect(600, 600, 400, 400);// clearRect(x,y,width,height) 在给定的矩形内清除指定的像素。// myCanvas.clearRect(700,700,100,100);// 颜色 阴影 属性// fillStyle 设置或返回用于 填充 绘画的颜色、 渐变 或模式。// myCanvas.shadowColor="yellow";// myCanvas.shadowBlur="20";// myCanvas.shadowOffsetX="20";// myCanvas.shadowOffsetY="20";// myCanvas.fillStyle="red";// myCanvas.fillRect(0,0,200,200);// strokeStyle 设置或返回用于 笔触 的颜色、渐变或模式。 // myCanvas.strokeStyle="yellow";// myCanvas.strokeRect(0, 0, 200, 200);// shadowColor 设置或返回用于阴影的颜色。// shadowBlur 设置或返回用于阴影的模糊级别。// shadowOffsetX 设置或返回阴影与形状的水平距离。// shadowOffsetY 设置或返回阴影与形状的垂直距离。// 颜色 阴影 方法// createLinearGradient(x0,y0,x1,y1) 创建线性渐变（用在画布内容上）。// createRadialGradient(x0,y0,r0,x1,y1,r1) 创建放射状/环形的渐变（用在画布内容上）。// addColorStop(stop,color) 规定渐变对象中的颜色和停止位置。 stop 0-1// 创建渐变色// var linearGra=myCanvas.createLinearGradient(0,0,450,450);varlinearGra=myCanvas.createRadialGradient(250, 250, 10, 250, 250, 300); // 设置渐变色// linearGra.addColorStop(0,"red");// linearGra.addColorStop(0.2,"yellow");// linearGra.addColorStop(0.7,"blue");// 使用渐变色// myCanvas.fillStyle=linearGra;// myCanvas.fillRect(0,0,500,500);// myCanvas.strokeStyle=linearGra;// myCanvas.strokeRect(10,10,500,500);// createPattern(元素名,重复) 在指定的方向上重复指定的元素。varoImg=document.getElementById("my_img"); // var oImg = new Image();// oImg.src = "../0603/img/1.jpg";oImg.onload=function () { varmyImg=myCanvas.createPattern(oImg, "repeat"); myCanvas.fillStyle=myImg; myCanvas.fillRect(0, 0, 500, 500); }
