【初识HTML5】(3) : 画布常用的API (1)

本文申明：为了节省时间，Sam偷了个小懒, 大部分例子来源网络，主要是为了方便演示。

1.矩形相关

clearRect(double x, double y, double w, double h) 清除指定方形区域的像素
x 要清除的矩形左上角的 x 坐标
y 要清除的矩形左上角的 y 坐标
w 要清除的矩形的宽度，以像素计
h要清除的矩形的高度，以像素计

<script>
var canvas=document.getElementById("myCanvas");
var context=canvas.getContext("2d");
context.fillStyle="red";
context.fillRect(0,0,300,150);
context.clearRect(20,20,100,50);
</script>

strokeRect(double x, double y, double w, double h) 以描边的方式绘出矩形
x 矩形左上角的 x 坐标
y 矩形左上角的 y 坐标
w 矩形的宽度，以像素计
h 矩形的高度，以像素计

<script>
var canvas=document.getElementById("myCanvas");
var context=canvas.getContext("2d");
context.strokeRect(20,20,150,100);
</script>

大家注意，描边其实还有其他的属性：lineCap、lineWidth、
 lineJoin
 、miterLimit 我们在后面的画线条的时候再做演示吧：

fillRect(double x, double y,double w, double h) 以填充的方式绘出矩形
这个同矩形描边，自己测试下吧。

注意，HTML5是没有圆角矩形绘制的，必须自己写代码实现，我们后面讨论。

---

2.颜色和透明度

var canvas = document.getElementById('canvas'),
    context = canvas.getContext('2d');
context.lineJoin = 'round';
context.lineWidth = 30;
context.font = '24px Helvetica';
context.fillText('Click anywhere to erase', 175, 200);
context.strokeStyle = 'goldenrod';
context.fillStyle = 'rgba(0,0,255,0.5)';
context.strokeRect(75, 100, 200, 200);
context.fillRect(325, 100, 200, 200);

大家看，文字从蓝色的矩形透出来，因为我们设置了矩形的透明度为 0.5。
strokeStyle 和 fillStyle的值可以是任意有效CSS参数，比如：
“#ffffff ”
“#444 ”
“rgba(100,100,100,0.4) ”
“rgb(255,255,0) ”
“hsl(20,32%,28%) ”
“hsla(40,82%,33%,0.4) ”
“antiquewhite”

或许有人会问为虾米是strokeStyle？不是strokecolor? 因为strokeStyle还可以定义渐变和图案属性，不单单是颜色，我们一起来研究下。

---

3.渐变和图案

var canvas = document.getElementById('canvas'),
    context = canvas.getContext('2d'),
    gradient = context.createLinearGradient(0, 0, canvas.width, 0);

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();

没有太大难度，渐变主要涉及到两个方法：

createLinearGradient(double x0,double y0, double x1, double y1) 线性渐变
x0, y0 渐变的起始点的坐标。
x1, y1 渐变的结束点的坐标。

createRadialGradient(double x0, double y0, double r0, double x1, double y1, double r1)径向渐变

x0 渐变的开始圆的 x 坐标
y0 渐变的开始圆的 y 坐标
r0 开始圆的半径
x1 渐变的结束圆的 x 坐标
y1 渐变的结束圆的 y 坐标
r1 结束圆的半径

我们再来看看图案吧

var canvas = document.getElementById('canvas'),
    context = canvas.getContext('2d'),
    image = new Image();
    image.src = 'xxx.png';
var pattern = context.createPattern(image, no-repeat);
   context.clearRect(0, 0, canvas.width, canvas.height);
   context.fillStyle = pattern;
   context.fillRect(0, 0, canvas.width, canvas.height);
   context.fill();

createPattern(HTMLImageElement | HTMLCanvasElement | HTMLVideoElement image, DOMString repetition) 创建图案

不难看出，此方法有两个参数，第一个可以是图片，画布，视频元素， 第二个参数是重复的样式。repeat 默认。该模式在水平和垂直方向重复。repeat-x 该模式只在水平方向重复。repeat-y 该模式只在垂直方向重复。no-repeat 该模式只显示一次（不重复）。

---

4.阴影

不管是文字，图形、图片等等，你都可以给他们加上阴影。对于阴影，我们有4个必须了解的属性：
shadowColor: CSS的颜色值
shadowOffsetX: 水平偏移
shadowOffsetY: 垂直偏移
shadowBlur: 模糊

我们先来看一段代码吧：

var SHADOW_COLOR = 'rgba(0,0,0,0.7)';
...
function setIconShadow() {
   iconContext.shadowColor = SHADOW_COLOR;
   iconContext.shadowOffsetX = 1;
   iconContext.shadowOffsetY = 1;
   iconContext.shadowBlur = 2;
}
function setSelectedIconShadow() {
   iconContext.shadowColor = SHADOW_COLOR;
   iconContext.shadowOffsetX = 4;
   iconContext.shadowOffsetY = 4;
   iconContext.shadowBlur = 5;
}

这里要大家体会的是描边图形和填充图形在阴影的应用上是有区别的，可以自己体会一下哟~ 下面是大家在使用阴影时的一些小贴士：
1.只有当你设置了shadowColor的值，且不是完全透明的情况下浏览器才会工作；
2.只有当你给shadowBlur, shadowOffsetX, or shadowOffsetY其中一个设置了非0值（正负都可以），浏览器才会工作：
3.如需关闭阴影，你可以将shadowColor 设置成 undefined （不一定兼容所有浏览器）或者通过save()和restore()来手动操作。
4.如果大家还记得我们在《画布原理》一文中提到的，画阴影时，浏览器会再开一个图？对吧？所以，如果你只是简单地给图形加阴影，那么问题不算大，但是建议尽量不要在动画中应用阴影，成本大~

---