canvas 2

最新推荐文章于 2024-03-17 09:40:44 发布

置顶 ee_Andy

最新推荐文章于 2024-03-17 09:40:44 发布

阅读量364

点赞数

分类专栏： HTML5

本文链接：https://blog.csdn.net/ee_Andy/article/details/52510718

版权

HTML5 专栏收录该内容

3 篇文章 0 订阅

订阅专栏

canvas

绘制圆形：

arc( x,y,半径，起始弧，结束弧，旋转方向 )

-- X,Y：圆心坐标；

--弧度与角度的关系：弧度=角度*Math.PI/180 -->PI 是大写

--旋转方向：顺时针（默认：false）,逆时针（true）

示例：

  
   <script>
window.onload=function(){
   var oc=document.getElementById('c');
   var ocg=oc.getContext('2d');
   ocg.arc(150,150,150,0,360*Math.PI/180,true);
   ocg.stroke();
 }
  </script>

vanvas 绘制钟表：

  
  <!DOCTYPE html >
 <head>
  <title>canvas</title>
  <meta charset="UTF-8">
  <script>
window.onload=function(){
   var oc=document.getElementById('c');
   var ocg=oc.getContext('2d');
    function toDraw(){
      var X=200;
      var Y=200;
      var r=150;
      ocg.clearRect(0,0,oc.width,oc.height) 
     var oDate=new Date();
     var oHours=oDate.getHours();
     var oMin=oDate.getMinutes();
     var oSen=oDate.getSeconds();

     var OhoursValue=(-90+oHours*30+oMin/2)*Math.PI/180;
     var oMinValue=(-90+oMin*6)*Math.PI/180;
     var oSenValue=(-90+oSen*6)*Math.PI/180;

      ocg.beginPath();
      for (var i = 0; i <60; i++) {
        ocg.moveTo(X,Y);
        ocg.arc(X,Y,r,6*i*Math.PI/180,6*(i+1)*Math.PI/180,false)
      }
       ocg.closePath();
       ocg.stroke();
      
      ocg.fillStyle='white'
      ocg.beginPath();
      ocg.moveTo(X,Y);
      ocg.arc(X,Y,r*19/20,0,360*Math.PI/180,false)
      ocg.closePath();
      ocg.fill();
 
      ocg.lineWidth=3;
     ocg.beginPath();
      for (var i = 0; i <12; i++) {
        ocg.moveTo(X,Y);
        ocg.arc(X,Y,r,30*i*Math.PI/180,30*(i+1)*Math.PI/180,false)
      }
       ocg.closePath();
       ocg.stroke();

      ocg.fillStyle='white'
      ocg.beginPath();
      ocg.moveTo(X,Y);
      ocg.arc(X,Y,r*18/20,0,360*Math.PI/180,false)
      ocg.closePath();
      ocg.fill();

      ocg.lineWidth=5;
      ocg.beginPath();
      ocg.moveTo(X,Y);
      ocg.arc(X,Y,r*10/20,OhoursValue,OhoursValue,false)
      ocg.closePath();
      ocg.stroke();

      ocg.lineWidth=3;
      ocg.beginPath();
      ocg.moveTo(X,Y);
      ocg.arc(X,Y,r*14/20,oMinValue,oMinValue,false)
      ocg.closePath();
      ocg.stroke();
      
      ocg.save();
      ocg.lineWidth=1;
      ocg.strokeStyle='red'
      ocg.beginPath();
      ocg.moveTo(X,Y);
      ocg.arc(X,Y,r*19/20,oSenValue,oSenValue,false)
      ocg.closePath();
      ocg.stroke();
      ocg.restore();
    }
    setInterval(toDraw,1000)
   toDraw();
 }
  </script>
  <style type="text/css">
    #c{
      background:white;
    }
  </style>
 </head>
 <body style='background:black'>
 <!-- <div id="div1" data-trr="abc"></div> -->
 <canvas id="c" width="1000px" height="600px">你的浏览器不支持canvas</canvas>
 </body>
</html>

绘制弧线

arcTo( X1,Y1,X1,Y2，半径 )

-- X1,Y1：第一个点坐标；起始点

-- X2,Y2：第二个点坐标；

   
    <script>
window.onload=function(){
   var oc=document.getElementById('c');
   var ocg=oc.getContext('2d');
   ocg.moveTo(100,200)
   ocg.arcTo(100,100,200,100,50)
   ocg.stroke();
 }
  </script>

绘制贝赛尔曲线：

方法1.quadraticCurveTo(dx,dy,x1,y1)

-- dx,dy -->第一组控制点

-- x1,y1 -->第二组结束坐标

   
   window.onload=function(){
   var oc=document.getElementById('c');
   var ocg=oc.getContext('2d');
   ocg.moveTo(100,200);
   ocg.quadraticCurveTo(100,100,200,100);
   ocg.stroke();
 }
  </script>

方法2.bezierCurveTo(dx1,dy1,dx2,dy2 ,x1,y1 )

-- dx1,dy1 -->第一组控制点

-- dx2,dy2 -->第二组控制点

-- x1,y1 -->第三组结束坐标

  
  window.onload=function(){
   var oc=document.getElementById('c');
   var ocg=oc.getContext('2d');
   ocg.moveTo(100,200);
   ocg.bezierCurveTo(100,100,200,200,200,100);
   ocg.stroke();
 }
  </script>

变换：

1.translate(x,y) -->偏移：从起始点为基准点，移动当前坐标位置,绘制在它后的图形才会偏移，前面的不会偏移

  
   var oc=document.getElementById('c');
   var ocg=oc.getContext('2d');
   ocg.translate(100,100);
   ocg.fillRect(0,0,100,100);

1.rotate(角度 *Math.PI/180 ) -->旋转：参数为弧度-->以左上角为中心旋转

  
  var oc=document.getElementById('c');
   var ocg=oc.getContext('2d');
   ocg.translate(100,100);
   ocg.rotate(30*Math.PI/180)  
   ocg.fillRect(0,0,100,100);

1.scale(宽的缩放比例, 高的缩放比例 ) -->缩小放大：按原来的大小的倍数进行缩小和放大

  
  var oc=document.getElementById('c');
   var ocg=oc.getContext('2d');
   ocg.translate(100,100);
   ocg.rotate(30*Math.PI/180) 
   ocg.scale(2,2) 
   ocg.fillRect(0,0,100,100);

旋转的小方块：

  
   <script>
window.onload=function(){
   var oc=document.getElementById('c');
   var ocg=oc.getContext('2d');
   var num=0;
  setInterval(function(){
    num++;
    ocg.save() ;
    ocg.clearRect(0,0,oc.width,oc.height) ;
    ocg.translate(300,300);
    ocg.rotate(num*Math.PI/180);
    ocg.translate(-50,-50); 
    ocg.fillRect(0,0,100,100);
    ocg.restore();
  },30)
 }
  </script>

旋转的放大的小方块：

  
   <script>
window.onload=function(){
   var oc=document.getElementById('c');
   var ocg=oc.getContext('2d');
   var num=0;
   var num2=0;
   var value=1;
   
  setInterval(function(){
    num++;
    ocg.save() ;
    ocg.clearRect(0,0,oc.width,oc.height) ;
    ocg.translate(300,300);
    if (num2==100){
        value=-1
    }else if(num2==0){
      value=1
    }
    num2+=value;
    ocg.scale(num2*1/50,num2*1/50)
    
    ocg.rotate(num*Math.PI/180);
    ocg.translate(-50,-50); 
    ocg.fillRect(0,0,100,100);
    ocg.restore();
  },30)
 }
  </script>