1.创建Canvas
<canvas id="myCanvas" width="200" height="200"></canvas>
canvas的属性有height，width，id. height和width 是可选的，默认高度为150px,宽度为300px,可以通过javascript和 CSS改 变。可以给canvas指定style.
如果所用的浏览器不支持canvas可以在canvas中添加替换元素，用来显示内容，如：
<canvas id="myCanvas" width="200" height="200">
要显示的内容（比如图片或者文字）
</canvas>
2. canvas没有画图的能力，必须通过脚本语言操作canvas来画图，通过 getContext 方法来 返回一个对象 ，该对象提供了用于在画布上绘图的方法和属性。
var canvas = document.getElementById(' myCanvas ');
var ctx = canvas.getContext('2d');
通过document.getElementById(' myCanvas ')获取Canvas的DOM节点，再通过canvas.getContext()获得上下文画图操作。通过getContext("2d") 对象属性和方法，可用于在画布上绘制文本、线条、矩形、圆形等等。
3.如果浏览器不支持Canvas可以通过替换内容来显示要显示的内容，当然也可以能过脚本来判断当前浏览器是否支持。比如：
var canvas = document.getElementById(' myCanvas ');
if( canvas.getContext){
//支持
}else{
//不支持
}
4.下面是一个示例：
<!DOCTYPE HTML>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
</head>
<body>
<canvas id="tutorial" width="150" height="150" style="border:1px solid #000"></canvas>
<script type="text/javascript">
function draw(){
var canvas = document.getElementById('tutorial');
if (canvas.getContext){
var ctx = canvas.getContext('2d');
ctx.fillStyle = "rgb(200,0,0)";
ctx.fillRect (10, 10, 55, 50);
ctx.fillStyle = "rgba(66, 66, 66, 0.5)";
ctx.fillRect (30, 30, 55, 50);
}
}
window.onload=function(){
draw();
};
</script>
</body>
</html>
5.canvas fillStyle 属性:
fillStyle 属性设置或返回用于填充绘画的颜色、渐变或模式。
默认值： #000000
JavaScript 语法： context.fillStyle= color | gradient | pattern ;
属性值值 描述
color 指示绘图填充色的 CSS 颜色值 。默认值是 #000000。
gradient 用于填充绘图的渐变对象（ 线性 或 放射性 ）
pattern 用于填充绘图的 pattern 对象
color可以是 ： ctx.fillStyle="#0000ff" ctx.fillStyle = "rgb(200,0,0)"; ctx.fillStyle = "rgba(66, 66, 66, 0.5)";// rgb()、 rgba()参阅CSS3gradient：
线性：createLinearGradient()
grd=ctx.createLinearGradient(0,0,170,0);//参阅6.createLinearGradient（）
grd.addColorStop(0,"black");
grd.addColorStop(1,"white");
ctx.fillStyle=grd;
放射性：createRadialGradient()
grd=ctx.createRadialGradient(75,50,5,90,60,100);//参阅7.create Radial Gradient（）
grd.addColorStop(0,"red");
grd.addColorStop(1,"white");
ctx.fillStyle=grd;
6.canvas createLinearGradient（x0,y0,x1,y1）方法
参数 描述
x0 渐变开始点的 x 坐标
y0 渐变开始点的 y 坐标
x1 渐变结束点的 x 坐标
y1 渐变结束点的 y 坐标
用于创建线性的渐变对象。 作为 strokeStyle 或 fillStyle 属性的值。
用 addColorStop() 方法规定不同的颜色，以及在 gradient 对象中的何处定位颜色。如：
var c=document.getElementById("myCanvas"); var ctx=c.getContext("2d");
var my_gradient=ctx.createLinearGradient(0,0,170,0);
my_gradient.addColorStop(0,"black");
my_gradient.addColorStop(0.5,"red");
my_gradient.addColorStop(1,"white");
ctx.fillStyle=my_gradient;
ctx.fillRect(20,20,150,100);
7. createRadialGradient(x0,y0,r0,x1,y1,r1) 方法
参数 描述
x0 渐变的开始圆的 x 坐标
y0 渐变的开始圆的 y 坐标
r0 开始圆的半径
x1 渐变的结束圆的 x 坐标
y1 渐变的结束圆的 y 坐标
r1 结束圆的半径
创建放射状/圆形渐变对象，用于填充矩形、圆形、线条、文本等等。可作为 strokeStyle 或 fillStyle 属性的值。
用 addColorStop() 方法规定不同的颜色，以及在 gradient 对象中的何处定位颜色。如：
8. addColorStop(offset, color)
在渐变中的某一点添加一个颜色变化.
参数 描述
off set 这是一个范围在 0.0 到 1.0 之间的浮点值，表示渐变的开始点和结束点之间的一部分。offset 为 0 对应开始点，offset 为 1 对应结束点。
color 以一个 CSS 颜色字符串的方式，表示在指定 offset 显示的颜色。沿着渐变某一点的颜色是根据这个值以及任何其他的颜色色标来插值的。
9. fillRect(x, y, width, height)方法
绘制矩形，可以用fillStyle 来填充颜色。
参数 描述
x, y 矩形的左上角的坐标。
width, height 矩形的大小。
10.画一个线段：
相关文章
精彩导读
热门资讯
关注我们
