<script>
window.onload=function()
//浏览器加载完成之后
{
var cv=document.getElementById（“cv”）；
var ctx=cv.getContext("2d");
//绘制path路径
ctx.beginPath（）；
ctx.moveTo（10，10）；//从这个位置开始
ctx.lineTo（50，50）；//连线到另外一点
ctx.lineTo（100，10）；
//ctx.closePath（）；封闭这个路径,然后会形成一个三角形
ctx.stroke（）；//轮廓
//利用路径画不规则多边形，实现阴影填充效果
ctx.beginPath（）；
ctx.moveTo（10，10）；
ctx.lineTo（50，50）；
ctx.lineTo（100，10）；
ctx.closePath（）；
//阴影
ctx.shadowColor=“red”;
ctx.shadowoffsetX=10;//偏移
ctx.shadowoffsetY=10;
ctx.shadowBlur=20;
ctx.fillStyle="yellow"；//填充
ctx.fill（）；
ctx.stroke（）；
}
//利用路径画弧线
ctx.beginPath（）；
//弧度：角度 *π/180
//false顺时针，true逆时针
ctx.arc（100，100，50， Math.PI/6，Math，Math.PI*5/6,false）；//圆心100，100，半径50
var rg=ctx.createRadiaGradient(100,100,20,100100,50);
rg.addColorStop（0，“red”）；
rg.addColorStop（1，“yellow”）；
ctx.fillStyle=rg;
ctx.fill（）；
//贝塞尔曲线
ctx.beginPath（）；
ctx.moveTo（10，300）
ctx.bezierCurveTo（60，200，160，400，210，300）；//三个控制点的坐标
ctx.stroke（）；
//
var img =new Image（）；
img.src=“xdd.jpg”;
img.onload=function(){
ctx.drawImage（img，400，10）；//画这张图象时的起点坐标(左上角位置)
ctx.drawImage（img,500,10,50，60）//第二种用法,把图片放大或缩小 宽50，高60像素
ctx.drawImage（img，15，5，60，70，400，200，120，140）；//截取局部区域图像，前面为截取区域，后面为放到哪，宽120，高140
}
</script>