Chinaunix首页 | 论坛 | 博客
  • 博客访问: 841201
  • 博文数量: 372
  • 博客积分: 10063
  • 博客等级: 中将
  • 技术积分: 4220
  • 用 户 组: 普通用户
  • 注册时间: 2012-02-24 11:36
文章分类

全部博文(372)

文章存档

2012年(372)

分类: 虚拟化

2012-04-10 18:55:09

让大家久等了,我们的渐变课程终于上演了,谢谢关注。

依照惯例,

如果您学习过之前的,你会觉得很亲切的,因为在html5里他们的名称是一样的。

我们一起来看代码注释讲解

线性渐变语法

createLinearGradient(xStart,yStart,xEnd,yEnd);
渐变起点横坐标:xStart,纵坐标:yStart;
渐变终点横坐标:xEnd,纵坐标:yEnd;

来给渐变加入至少2个的Stop点吧
addColorStop(offset,color)
offset为0到1的浮点值,来定义渐变偏移量
color可支持16进制、rgb、rgba颜色

 

径向渐变语法

CreateRadialGradient(xStart,yStart,radiusStart,xEnd,yEnd,radiusEnd);
开始圆心横坐标:xStart,纵坐标:yStart,半径:radiusStart;
结束圆心横坐标:xEnd,纵坐标:yEnd,半径:radiusEnd;

addColorStop(offset,color)
offset为0到1的浮点值,来定义渐变偏移量
color可支持16进制、rgb、rgba颜色

[javascript]

//得到画布上下文,上节已讲,在此不多说
var wh = document.getElementById("canvas");
function draw() {
canvas = document.getElementById("canvas");
if (canvas.getContext) { //检测浏览器是否兼容
ctx = canvas.getContext("2d"); //你的canvas代码在这里
return ctx;
}
return null;
}
/*我们用这个方法来创建线性渐变
createLinearGradient(xStart,yStart,xEnd,yEnd);
渐变起点横坐标:xStart,纵坐标:yStart;
渐变终点横坐标:xEnd,纵坐标:yEnd;

来给渐变加入至少2个的Stop点吧
addColorStop(offset,color)
offset为0到1的浮点值,来定义渐变偏移量
color可支持16进制、rgb、rgba颜色
*/
function CreateLinearGradient() {
var canvas = draw();
var grd = canvas.createLinearGradient(0, 0, 175, 50);
//支持这么多种的颜色定义方式
grd.addColorStop(0, "#9CAAC1");
grd.addColorStop(0.3, "black");
grd.addColorStop(0.6, "rgb(255,255,0)");
grd.addColorStop(1, 'rgba(255,0,0,0.3)');
canvas.fillStyle = grd;
canvas.fillRect(0, 0, 275, 50);
}
/*再来一个径向渐变吧
CreateRadialGradient(xStart,yStart,radiusStart,xEnd,yEnd,radiusEnd);
开始圆心横坐标:xStart,纵坐标:yStart,半径:radiusStart;
结束圆心横坐标:xEnd,纵坐标:yEnd,半径:radiusEnd;

addColorStop(offset,color)
offset为0到1的浮点值,来定义渐变偏移量
color可支持16进制、rgb、rgba颜色
*/
function CreateRadialGradient() {
var canvas = draw();
canvas.strokeStyle = "blue";
canvas.lineWidth = 2;
canvas.beginPath();
var grd = canvas.createRadialGradient(120, 220, 0, 120, 220, 90);
grd.addColorStop(0, "#9CAAC1");
grd.addColorStop(0.3, "black");
grd.addColorStop(0.6, "rgb(255,255,0)");
grd.addColorStop(1, 'rgba(255,0,0,0.3)');
canvas.fillStyle = grd;
//arc(x,y,radius[半径],startAngle[开始弧度],endAngle[结束弧度],anticlockwise[true顺时针绘制,false逆时针绘制])
canvas.arc(120, 220, 100, 0, 2 * Math.PI, true);
canvas.closePath();
canvas.stroke();
canvas.fill();
}
/*最后看一个基本方法,擦除
clearRect(x,y,width,heigth);要擦除以x,y坐标为起点,width,heigth为长宽的矩形区域里的内容
*/
function Ca() {
var canvas = draw();
canvas.clearRect(0, 0, wh.width, wh.height);
}

阅读(1107) | 评论(0) | 转发(0) |
给主人留下些什么吧!~~