跟KingDZ学HTML5之六：Canvas特效-阴影和渐变_H5之家

我们首先看一下，如何实现一个阴影效果，呵呵，看效果吧

好了，先给大家展示一下代码，在说明一下。

XML/HTML Code复制内容到剪贴板

<! doctype html>
<html>
<head>
<script type="text/javascript">
function draw() {
var c = document.getElementById("mycanvas");
var ccxt = c.getContext("2d");
cxt.shadowOffsetX = 5;
cxt.shadowOffsetY = 5;
cxt.shadowBlur = 4;
cxt.shadowColor = "rgba(255,0,0,0.5)";
cxt.fillStyle = "orange";
cxt.arc(50, 50, 50, 0, Math.PI * 2, true);
cxt.fill();
}
</script>
</head>
<body>
<canvas id="mycanvas" width="200" height="200">不支持此标签 KingDZ原创 http://www.cnblogs.com/hihell</canvas>
<input type="button" value="画图" onclick="draw();" />
<body>
</html>

上面的结果注意点

颜色渐变的几个重要属性。

createLinearGradient 和 createRadialGradient。

前者创建线性颜色渐变，后者创建圆形颜色渐变。创建颜色渐变对象后，可以使用对象的 addColorStop 方法添加颜色中间值。

好了，还是用例子说明吧。

JavaScript Code复制内容到剪贴板

createLinearGradient(x1,y1,x2,y2) //(x1,y1)渐变的起点 (x2,y2)渐变的终点
createRadialGradient(x1,y1,r1,x2,y2,r2) // 前面是一个原点为 (x1,y1) 半径为 r1的点，后面的那个是以(x2,y2) 为原点，r2为半径的点。

addColorStop(position, color)//这个方法的第一个参数，就是位置，取值范围 0---1.0 color 则必须是一个 CSS 颜色值

下面我们实现一个线性渐变