<img src="img/lamp.gif" id="lamp"/>
<img src="img/eg_tulip.jpg" id="tulip"/>
<!-- <video id="video" autoplay controls>
<source src="img/mov_bbb.mp4" type="video/mp4"/>
</video> -->
<canvas id="canvas" height="300" width="300" style="border:1px solid #d3d3d3;"></canvas>
<script type="text/javascript">
var c=document.getElementById("canvas");
var ctx=c.getContext("2d");
//填充单一颜色
//ctx.rect(20,20,200,400);
//ctx.fillStyle="red";
//ctx.fill();
//填充线性渐变颜色
// var gradient=ctx.createLinearGradient(0,0,0,100);
// gradient.addColorStop(0,"red");
// gradient.addColorStop(1,"green");
// ctx.fillStyle=gradient;
// ctx.fillRect(20,20,150,100);
//填充背景图片
// window.onload=function(){
// draw("repeat");
// }
// function draw(direction){
// var img=document.getElementById("lamp")
// var pat=ctx.createPattern(img,direction);
// ctx.rect(0,0,150,100);
// ctx.fillStyle=pat;
// ctx.fill();
// }
//画矩形
//ctx.strokeStyle="red";
// ctx.strokeRect(20,20,200,150);
//线性渐变色矩形
// var gradient=ctx.createLinearGradient(0,0,170,0);
// gradient.addColorStop(0,"red");
// gradient.addColorStop(0.5,"blue");
// gradient.addColorStop(1,"green");
// ctx.lineWidth=5;
// ctx.strokeStyle=gradient;
// ctx.strokeRect(20,20,200,200);
//线性渐变文字
// ctx.font="30px Microsoft YaHei";
// var gradient=ctx.createLinearGradient(0,0,200,10);
// gradient.addColorStop(0,"red");
// gradient.addColorStop(0.5,"blue");
// gradient.addColorStop(1,"green");
// ctx.strokeStyle=gradient;
// ctx.strokeText("Hello Word",20,30);
//绘制带黑色阴影的蓝色矩形
// ctx.shadowBlur=20;
// ctx.shadowOffsetX=10;
// ctx.shadowOffsetY=10;
// ctx.shadowColor="black";
// ctx.fillStyle="blue";
// ctx.fillRect(20,20,100,150);
//放射状/圆形渐变
// var grd=ctx.createRadialGradient(75,50,5,90,60,100);
// grd.addColorStop(0,"red");
// grd.addColorStop(1,"blue");
// ctx.fillStyle=grd;
// ctx.fillRect(10,10,150,100);
//设置或返回线条的结束端点样式lineCap
// ctx.beginPath();
// ctx.lineCap="round";
// ctx.moveTo(20,20);
// ctx.lineTo(200,20);
// ctx.lineWidth=10;
// ctx.stroke();
// ctx.beginPath();
// ctx.lineCap="butt";
// ctx.moveTo(20,40);
// ctx.lineTo(200,40);
// ctx.lineWidth=10;
// ctx.stroke();
// ctx.beginPath();
// ctx.lineCap="square";
// ctx.moveTo(20,60);
// ctx.lineTo(200,60);
// ctx.lineWidth=10;
// ctx.stroke();
//设置或返回两条线相交时，所创建的拐角类型lineJoin:bevel/round/miter
//bevel 创建斜角。
//round 创建圆角。
//miter 默认。创建尖角。
// ctx.lineJoin="bevel";
// ctx.lineWidth=10;
// ctx.moveTo(20,20);
// ctx.lineTo(100,50);
// ctx.lineTo(20,100);
// ctx.stroke();
//设置或返回最大斜接长度miterLimit
// ctx.lineJoin="miter";
// ctx.lineWidth=10;
// ctx.miterLimit=5;
// ctx.moveTo(20,20);
// ctx.lineTo(50,27);
// ctx.lineTo(20,34);
// ctx.stroke();
//画三角形
// ctx.beginPath();
// ctx.moveTo(20,20);
// ctx.lineTo(20,70);
// ctx.lineTo(50,70);
// ctx.strokeStyle="green";
// ctx.closePath();
// ctx.stroke();
//clip从原始画布剪切任意形状和尺寸的区域
// ctx.rect(50,20,200,120);
// ctx.stroke();
// ctx.clip();
// ctx.fillStyle="green";
// ctx.fillRect(0,0,150,200);
//画圆
// ctx.beginPath();
// ctx.arc(100,100,50,0,2*Math.PI);
// ctx.fillStyle="red";
// ctx.stroke();
// ctx.fill();
//创建两切线之间的弧/曲线
// ctx.beginPath();
// ctx.moveTo(20,20);
// ctx.lineTo(100,20);
// ctx.arcTo(150,20,150,70,50);
// ctx.lineTo(150,120);
// ctx.stroke();
//isPointInPath如果指定的点位于当前路径中，则返回 true，否则返回 false
// ctx.rect(20,20,150,200);
// if(ctx.isPointInPath(20,50)){
// ctx.stroke();
// }
//剪切图片，并在画布上对被剪切的部分进行定位：
// document.getElementById("tulip").onload=function(){
// var img=document.getElementById("tulip");
// ctx.drawImage(img,90,180,90,80,20,20,150,200);
// }
//在画布上播放视频
// var video=document.getElementById("video");
// video.addEventListener("play",function(){
// var i=window.setInterval(function(){
// ctx.drawImage(video,0,0);
// },20);
// },false);
// video.addEventListener("pause",function(){
// window.clearInterval(i);
// },false);
// video.addEventListener("ended",function(){
// clearInterval(i);
// },false);
//设置或返回新图像如何绘制到已有的图像上
//source-over,source-atop,source-in,source-out
//destination-over,destination-atop,destination-in,destination-out
//lighter,copy
ctx.fillStyle="red";
ctx.fillRect(0,0,50,50);
ctx.globalCompositeOperation="source-over";
ctx.fillStyle="blue";
ctx.fillRect(20,20,50,50);
//save保存上下文环境
ctx.save();
ctx.shadowOffsetX=10;
ctx.shadowOffsetY=10;
ctx.shadowBlur=5;
ctx.shadowColor="black";
//restore用于恢复到上一次保存的上下文环境
ctx.fillStyle="red";
ctx.fillRect(0,0,50,50);
ctx.restore();
ctx.fillStyle="green";
ctx.fillRect(80,0,50,50);
上面代码先用save方法，保存了当前设置，然后绘制了一个有阴影的矩形。接着，使用restore方法，恢复了保存前的设置，绘制了一个没有阴影的矩形。