HTML5新特性 canvas 画布

最新推荐文章于 2022-08-30 19:02:47 发布

gzlxing

最新推荐文章于 2022-08-30 19:02:47 发布

阅读量444

点赞数

分类专栏： html 文章标签： html5

本文链接：https://blog.csdn.net/qq_40238154/article/details/78668763

版权

html 专栏收录该内容

12 篇文章 0 订阅

订阅专栏

HTML新特性 canvas

canvan 画布

<canvas>您的浏览器不支持</canvas>

canvas就是一个标签，默认值的大小为 300/150，display为inline-block；
*注意*：不能在css中设置宽和高，只能在标签中设置width和height的值，没有单位
设置居中为：text-align：center；
定义画笔===获取上下文
var painting=canvas.getContext('2d');

填充矩形fillRect(x,y,w,h);
               painting.fillRect(0,0,100,100);
改变元素的填充色：painting.fillStyle='rgba(0,0,200,0.5)';

描边矩形strokeRect(x,y,w,h);
       painting.strokeRect(0,0,100,100);
       painting.strokeStyle='rgba(0,0,200,0.4)';

画矩形：painting.rect(50,50,100,100); 
  填充：painting.fill();
  描边：painting.stroke(); 


  抬笔：painting.beginPath();

画线段：
起始坐标：painting.moveTo(x,y);
结束坐标：painting.lineTo(x,y);

收尾相连：painting.closePath();  

画三角形：painting.beginPath();
         painting.moveTo(30,30);  
         painting.lineTo(80,30);
         painting.lineTo(80,80);
         painting.closePath();
         painting.stroke();

画正方形：painting.beginPath();
         painting.moveTo(50,50);
         painting.lineTo(100,50);
         painting.lineTo(100,100);
         painting.lineTo(100,50);
         painting.closePath();
         painting.stroke();

   画圆：painting.arc(x,y,r,Sdeg,Edeg,true/false);
    //参数1，参数2：圆心坐标
    //参数3：半径
    //参数4，参数5：起始角度，结束角度
    //参数6：是顺时针(false)还是逆时针(true)  --- false默认值
        painting.beginPath();
        painting.arc(100,100,40,0,2*Math.PI,true);
        painting.closePath();
        painting.stroke();

   圆弧：painting.arcTo(x1,y1,x2,y2,r);
        painting.beginPath();
        painting.moveTo(50,50);
        painting.lineTo(100,50);
        painting.arcTo(150,50,150,70,50);
        painting.lineTo(150,150);
        painting.stroke();

   文字：painting.fillText();
        //水平居中

        painting.textAlign = 'start';/*默认值*/
        painting.textAlign = 'center';
        painting.textAlign = 'end';
         //垂直对齐
        painting.textBaseline = 'top';
        painting.textBaseline = 'hanging';
        painting.textBaseline = 'middle';
        painting.textBaseline = 'bottom';
        painting.textBaseline = 'alphabetic';/*默认值*/
        //文字
        painting.font = 'bold 50px 微软雅黑';
        painting.fillStyle = 'blue';
        painting.fillText('a枣树',250,80);
        //镂空字
        painting.strokeText('a枣树',250,80);
        painting.beginPath();
        painting.fillStyle = 'red';
        painting.fillRect(250,80,300,2);

 实现五角星：
       var canvas=document.getElementById('canvas');
       var painting=canvas.getContext('2d');
       painting.translate(100,100);
       var R=100;
       var r=40;
       painting.moveTo(R*Math.cos(18/180*Math.PI),-R*Math.sin(18/180*Math.PI))；
       for (var i=0;i<5;i++){
       painting.lineTo(R*Math.cos((18+72*i)/180*Math.PI),-R*Math.sin((18+72*i)/180*Math.PI));
        painting.lineTo(r*Math.cos((54+72*i)/180*Math.PI),-r*Math.sin((54+72*i)/180*Math.PI));
        }
         painting.closePath();
         painting.fillStyle='red';
         painting.fill();