首页 > 代码库 > save()和restore()——弧度制——等5.4.2.html笔记
save()和restore()——弧度制——等5.4.2.html笔记
画完一个图后
保存canvas状态→save()
保存使处安全状态,不影响别人,也不被他人影响。
接着画完别的图形后
恢复canvas状态→restore()
释放出原来安全区域的图形
养成好习惯。
<!doctype html> <html> <head> <meta content="text/html; charset=utf-8" http-equiv="Content-Type"></meta> </head> <body> <canvas id="myCanvas" width="700" height="300"></canvas> <script language="javascript"> //var c=document.getElementById("myCanvas"); //var ctx=c.getContext("2d"); function drawTop(ctx,fillStyle){ ctx.fillStyle这个是属性=fillStyle这个是参数; ctx.beginPath(); ctx.arc(0,0,30,0,Math.PI,true); 角度均采用弧度制 ctx.closePath(); ture是逆时针,所以只画一个雨伞的话以0,0为原点逆时针旋转是看不见的,需要改变坐标,如(30,30……)(去掉移动函数记得获取画布环境 ctx.fill(); } function drawGrip(ctx){ ctx.save(); 保存 ctx.fillStyle="blue"; ctx.fillRect(-1.5,0,1.5,40); ctx.beginPath(); //那个钩 ctx.strokeStyle="blue"; ctx.arc(-5,40,4,Math.PI,Math.PI*2,true); 角度均采用弧度制 ctx.stroke(); //到此 ctx.closePath(); ctx.restore(); 恢复 } function draw(){ var ctx=document.getElementById(‘myCanvas‘).getContext("2d"); ctx.translate(80,80);移动坐标空间,亦称“重置” for(var i=1;i<10;i++) { ctx.save(); 保存 ctx.translate(60*i,0); drawTop(ctx,"rgb("+(30*i)+","+(255-30*i)+",255)"); drawGrip(ctx); ctx.restore(); 恢复 } } window.onload=function(){ draw(); } </script> </body> </html>
声明:以上内容来自用户投稿及互联网公开渠道收集整理发布,本网站不拥有所有权,未作人工编辑处理,也不承担相关法律责任,若内容有误或涉及侵权可进行投诉: 投诉/举报 工作人员会在5个工作日内联系你,一经查实,本站将立刻删除涉嫌侵权内容。