HTML5中canvas原素怎样绘图图型

摘要: HTML5中canvas原素怎样绘图图型|频道:HTML5|点一下: 次var demo=document.getElementById( demo var fang=demo.getContext( 2d fang.fill >线框moveTo:线框刚开始部位lineTo:完毕部位lineWidth:线框总宽strokeStyle:色调...

HTML5中canvas原素怎样绘图图型 |频道:HTML5|点一下: 次 var demo=document.getElementById( demo var fang=demo.getContext( 2d fang.fill >

Image 1.jpg

线框

moveTo:线框刚开始部位

lineTo:完毕部位

lineWidth:线框总宽

strokeStyle:色调

stroke:刚开始绘图

var demo=document.getElementById( demo var xian=demo.getContext( 2d xian.moveTo(10,10); xian.lineTo(100,100); xian.lineWidth=2; xian.stroke >

Image 2.jpg

圆形

beginPath():刚开始相对路径

arc(x,y,r,sAngle,eAngle,counterclockwise)

x,y:为圆的管理中心点座标

r:圆的半径

sAngle,eAngle:圆的起止角和完毕角

counterclockwise:可写并不写要求应当反方向還是顺时针方向制图。False = 顺时针方向,true = 反方向。

var demo=document.getElementById( demo var yuan=demo.getContext( 2d yuan.beginPath(); yuan.arc(100,100,50,0,2*Math.PI); yuan.stroke >

Image 3.jpg

图型插进

drawImage(img,sx,sy,swidth,sheight,x,y,width,height)

sx,sy:裁切的 x,y 座标部位

swidth,sheight:被裁切图象的总宽和高宽比

x,y:在画布上面置图象的 x,y 座标部位

width,height:要应用的图象的总宽和高宽比

var demo=document.getElementById( demo var img1=document.getElementById( img1 var img=demo.getContext( 2d img1.onload=function(){


联系我们

全国服务热线:4000-399-000 公司邮箱:343111187@qq.com

  工作日 9:00-18:00

关注我们

官网公众号

官网公众号

Copyright?2020 广州凡科互联网科技股份有限公司 版权所有 粤ICP备10235580号 客服热线 18720358503

技术支持:网站建设的论文