canvas(path)

来源:互联网 发布:工业增加值算法 编辑:程序博客网 时间:2024/06/03 18:42
<!DOCTYPE html><html lang="en"><head><meta charset="UTF-8"><title>Document</title><style>canvas{background: #ddd;}</style></head><body><h2>canvas——路径</h2><canvas id="c2" width="500" height="400">您的浏览器版本太低,请升级!</canvas><script>var c2=document.getElementById('c2');var ctx=c2.getContext('2d');//三角形ctx.strokeStyle="red";ctx.beginPath();ctx.moveTo(250,50);ctx.lineTo(300,100);ctx.lineTo(200,100);ctx.closePath();ctx.stroke();//圆ctx.beginPath();ctx.arc(250,200,50,0,2*Math.PI);ctx.closePath();ctx.stroke();//圆拱ctx.beginPath();ctx.arc(300,200,50,0*Math.PI/180,180*Math.PI/180);ctx.stroke();  //这个放到里面会画出拱形,放到外面则会多出一条线ctx.closePath();</script></body></html>