Canvas杂谈

　　最近在看一些关于Canvas的知识...这篇文章主要是用来记录学习中遇见的一些问题...以及难以理解的一些东西..

　　转帖请注明出处:http://www.cnblogs.com/Troy-Lv5/p/3713900.html 

　　前置式两个对象. canvas与context, 下面将一直使用这两个对象进行说明

var canvas = document.getElementById("canvasDom");
var context = canvas.getContext("2d");

　　1. 线性渐变.

//createLinearGradient参数为:
//开始的x坐标, 开始的y坐标, 结束的x坐标, 结束的y坐标
//和使用photoshop时拉动渐变色是一样的道理
//比如现在使用的就是开始的点为x:200, y:200, 结束的点为x:400, y:200
//当然我这样设置是因为我要显示的rect是在x:200, y:300的位置, 大小为200*200
var gradient = context.createLinearGradient(200,200, 400, 200);
gradient.addColorStop(0, "red");
gradient.addColorStop(0.25, "yellow");
gradient.addColorStop(0.5, "green");
gradient.addColorStop(0.75, "blue");
gradient.addColorStop(1, "purple");

context.fillStyle = gradient;
context.rect(200,300,200,200);
context.fill();