<canvas></canvas>是html5出现的新标签，像所有的dom对象一样它有自己本身的属性、方法和事件，其中就有绘图的方法，js能够调用它来进行绘图，首先我们需要获取canvas对象，如下：
var mycanvas = document.getElementById("mycanvas");
if (mycanvas == null) {
return false;
}
var context = mycanvas.getContext("2d");//获取canvas对象，
接下来绘制正方形，接下来开始绘制图形：
<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title></title>
<script type="text/javascript">
window.onload = function () {
var mycanvas = document.getElementById("mycanvas");
if (mycanvas == null) {
return false;
}
var context = mycanvas.getContext("2d");
/* fillRect() 方法绘制“已填色”的矩形。默认的填充颜色是黑色。说明：请使用 fillStyle 属性来设置用于填充绘图的颜色、渐变或模式。
* 语法：context.fillRect(x,y,width,height);
* 参数：矩形左上角的x，y坐标，以及宽与高
*/
context.save();
context.fillRect(5, 10, 100, 100);//在没有设置填充样式时(fillStyle)，默认是black;有填充颜色
context.restore();
/*
* strokeRect() 方法绘制矩形（不填色）。笔触的默认颜色是黑色。说明：请使用 strokeStyle 属性来设置笔触的颜色、渐变或模式。
* 语法：context.strokeRect(x,y,width,height);
* 参数：矩形左上角的x，y坐标，以及宽与高
*/
context.save();
context.strokeRect(110, 10, 100, 100);//在没有设置笔触样式时(strokeStyle)时，默认样式是black;
context.restore();
//设置填充样式与笔触样式(纯色)
context.save();//保存画笔状态，或者说是保存当前环境的状态，暂时不用管，后面再详细说明
context.fillStyle = "red";
context.fillRect(220, 10, 100, 100);
context.restore();//恢复到保存之前的画笔状态，或者说返回之前保存过的路径状态和属性
context.save();
context.strokeStyle = "red";
context.strokeRect(330, 10, 100, 100);
context.restore();
//设置带透明度的填充样式以及笔触颜色
//透明度越小，越透明，越大，越接近纯色
context.save();
context.fillStyle = "rgba(255,0,0,0.5)";
context.fillRect(440, 10, 100, 100);
context.restore();
context.save();
context.strokeStyle = "rgba(255,0,0,0.5)";
context.strokeRect(550, 10, 100, 100);
context.restore();
/*
* shadowColor 属性设置或返回用于阴影的颜色。
* 语法： context.shadowColor=color;
* shadowBlur 属性设置或返回阴影的模糊级数。
* 语法：context.shadowBlur=number;
* shaowColor需要与shadowBlur一起使用来创建阴影
*/
context.save();
context.fillStyle = "red";
context.shadowColor = "blue";//设置或返回用于阴影的颜色，需要与下面的模糊基本一起使用
context.shadowBlur = 10;//设置或返回用于阴影的模糊级别,数值越大，模糊的范围越大
context.fillRect(5, 120, 100, 100);
context.restore();
/* shadowOffsetX 设置或返回阴影距形状的水平距离
* 语法：context.shadowOffsetX = number;
* 参数:number 正值或负值，定义阴影与形状的水平距离
* 说明：shadowOffsetX=0 指示阴影位于形状的正下方。
* shadowOffsetX=10 指示阴影位于形状 left 位置右侧的 10 像素处。
* shadowOffsetX=-10 指示阴影位于形状 left 位置左侧的 10 像素处。
*/
context.save();
context.fillStyle = "red";
context.shadowColor = "blue";
context.shadowBlur = 10;
context.shadowOffsetX = 30; //设置或返回形状与阴影的水平距离,0时位于形状的正下方，大于零时位于形状的右方，小与零时位于形状的左方
context.fillRect(130, 120, 100, 100);
context.restore();
/*
* shadowOffsetY 设置或返回阴影距形状的垂直距离
* 语法：context.shadowOffsetY=number;
* 参数：number 正值或负值，定义阴影与形状的垂直距离。
* 说明：shadowOffsetY=0 指示阴影位于形状的正下方。
* shadowOffsetY=10 指示阴影位于形状 top 位置下方的 10 像素处。
* shadowOffsetY=-10 指示阴影位于形状 top 位置上方的 10 像素处。
*/
context.save();
context.fillStyle = "red";
context.shadowColor = "blue";
context.shadowBlur = 10;
context.shadowOffsetY = 30; //设置或返回形状与阴影的水平距离,0时位于形状的正下方，大于零时位于形状的的下方，小与零时位于形状的上方30处
context.fillRect(300, 150, 100, 100);
context.restore();
context.save();
context.rect(450, 120, 100, 100);//
context.strokeStyle = "blue";
context.fill();
context.stroke();//rect需要与stroke结合使用
context.restore();
//rect() 方法创建矩形。
//语法：context.rect(x,y,width,height);
//参数：矩形左上角的x,y坐标，以及宽与高，需要与fill与stroke结合使用
context.save();
context.rect(560, 120, 100, 100);//为什么上面的也会填充绿色，暂时不清楚
context.fillStyle = "green";
context.fill();
context.restore();
//在给定的矩形内清除指定的像素
//语法：context.clearRect(x,y,width,height)
//参数：要清除的矩形左上角的 x，y 坐标,以及宽与高,单位是像素
context.clearRect(500, 140, 120, 60);
//颜色渐变
/*
* createLinearGradient() 创建线性渐变（用在画布内容上）
* 语法：context.createLinearGradient(x0,y0,x1,y1);
* 参数：渐变开始点的x,y坐标，渐变结束点的x,y坐标
* 说明：createLinearGradient() 方法创建线性的渐变对象。
* 渐变可用于填充矩形、圆形、线条、文本等等。
* 该对象可以作为 strokeStyle 或 fillStyle 属性的值。
* 需要与 addColorStop() 方法一起使用，用来规定不同的颜色，以及在 gradient 对象中的何处定位颜色。
*
* addColorStop() 规定渐变对象中的颜色和停止位置
* 语法：gradient.addColorStop(stop,color);
* 参数：stop 介于 0.0 与 1.0 之间的值，表示渐变中开始与结束之间的位置。
* color 在结束位置显示的 CSS 颜色值
* 说明： addColorStop() 方法与 createLinearGradient() 或 createRadialGradient() 一起使用。
* 您可以多次调用 addColorStop() 方法来改变渐变。
* 如果您不对 gradient 对象使用该方法，那么渐变将不可见。为了获得可见的渐变，您需要创建至少一个色标。
*
*/
context.save();
var grd = context.createLinearGradient(5, 230, 5, 340);//上下渐变,有绿到红
grd.addColorStop(0, "green");
grd.addColorStop(1, "red");
context.fillStyle = grd;
context.fillRect(5, 230, 110, 110);
context.restore();
context.save();
var grd = context.createLinearGradient(120, 230, 230, 230);//水平渐变，有红到绿
grd.addColorStop(0, "red");
grd.addColorStop(1, "green");
context.fillStyle = grd;
context.fillRect(120, 230, 110, 110);
context.restore();
//定义一个三色渐变
context.save();
var grd = context.createLinearGradient(5, 230, 5, 340);//水平渐变，有红到绿
grd.addColorStop(0, "red");
grd.addColorStop(0.3, "green");
grd.addColorStop(1, "black");
context.fillStyle = grd;
context.fillRect(450, 230, 110, 110);
context.restore();
//在指定的方向上重复指定的元素
/*
* createPattern() 在指定的方向上重复指定的元素
* 语法：context.createPattern(image,"repeat|repeat-x|repeat-y|no-repeat");
* 参数：image 规定要使用的图片、画布或视频元素。
* repeat 默认。该模式在水平和垂直方向重复。
* repeat-x 该模式只在水平方向重复。
* repeat-y 该模式只在垂直方向重复。
* no-repeat 该模式只显示一次（不重复）。
* 说明：元素可以是图片、视频，或者其他 <canvas> 元素。
被重复的元素可用于绘制/填充矩形、圆形或线条等等。
*/
context.save();
var img = document.getElementById("icon");
var pattern = context.createPattern(img, "repeat");//填充了整个canvas，只是显示出来了指定的区域,从canvas的左上角开发画
context.fillStyle = pattern;
context.fillRect(570, 230, 110, 110);
context.fillRect(0, 350, 110, 110);
context.restore();
}
</script>
</head>
<body>
<img src="images/1.gif" id="icon"/>
<canvas width="900" height="600" id="mycanvas" style="border:1px solid blue;"></canvas>
</body>
</html>
运行效果如下图：
扫一扫
279
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
