zoukankan      html  css  js  c++  java
  • 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>
    

      

  • 相关阅读:
    centos7 安装mysql
    ketlle windows下的安装(最基本)
    Spark参数详解 一(Spark1.6)
    SSM项目集成Lucene+IKAnalyzer在Junit单元测试中执行异常
    解决jquery.pjax加载后的异常滚动
    码云项目克隆至github
    JFinal获取多个model
    避免layui form表单重复触发submit绑定事件
    解决pjax重复绑定
    jfinal 拦截器中判断是否为pjax请求
  • 原文地址:https://www.cnblogs.com/coke126/p/3701544.html
Copyright © 2011-2022 走看看