HTML-Canvas-路径

<script>

window.οnlοad=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.οnlοad=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>