canvas进阶

最新推荐文章于 2023-01-02 01:15:30 发布

吃完饭想睡觉

最新推荐文章于 2023-01-02 01:15:30 发布

阅读量416

点赞数 1

分类专栏： web前端

本文链接：https://blog.youkuaiyun.com/Rachealrq/article/details/52728223

版权

web前端专栏收录该内容

8 篇文章

订阅专栏

Canvas颜色样式和阴影

1.设置填充和描边的颜色

fillStyle : 设置或返回用于填充绘画的颜色；

strokeStyle: 设置或返回用于笔触的颜色。

以上两个值都可以接受颜色名,16进制数据，rgb值，甚至rgba. 一般先进行设置样式然后进行绘制。

    例如：

        ctx.strokeStyle = "red";

        ctx.strokeStyle = "#ccc";

        ctx.strokeStyle = "rgb(255,0,0)";

        ctx.strokeStyle = "rgba(255,0,0,6)";
   2.设置阴影（了解，少用，性能差） 
       shadowColor ： 设置或返回用于阴影的颜色
     shadowBlur ： 设置或返回用于阴影的模糊级别,大于1的正整数，数值越高，模糊程度越大
     shadowOffsetX： 设置或返回阴影距形状的水平距离
     shadowOffsetY： 设置或返回阴影距形状的垂直距离     ctx.fillStyle = "rgba(255,0,0, .9)"
      ctx.shadowColor = "teal";
      ctx.shadowBlur = 10;
      ctx.shadowOffsetX = 10;
        ctx.shadowOffsetY = 10;
        ctx.fillRect(100, 100, 100, 100);
        （设置png图片的阴影，图片透明部分不会被投影）
   3.变换
    a.缩放 scale() 方法缩放当前绘图，更大或更小; 语法：context.scale(scalewidth,scaleheight); scalewidth : 缩放当前绘图的宽度 (1=100%, 0.5=50%, 2=200%, 依次类推); scaleheight : 缩放当前绘图的高度 (1=100%, 0.5=50%, 2=200%, etc.) 注意：缩放的是整个画布，缩放后，继续绘制的图形会被放大或缩小。 b.位移画布 ctx.translate(x,y) 方法重新映射画布上的 (0,0) 位置; 参数说明：x：添加到水平坐标（x）上的值；y：添加到垂直坐标（y）上的值。  发生位移后，相当于把画布的0,0坐标更换到新的x,y的位置，所有绘制的新元素都被影响。 （位移画布一般配合缩放和旋转等）  c.旋转
        context.rotate(angle); 方法旋转当前的绘图;
        注意参数是弧度（PI)
        如需将角度转换为弧度，请使用 degrees*Math.PI/180 公式进行计算;
  4.绘制环境保存和还原
     ctx.save() 保存当前环境的状态(可以把当前绘制环境进行保存到缓存中);
     ctx.restore() 返回之前保存过的路径状态和属性(获取最近缓存的ctx);
     一般配合位移画布使用。
  5.设置绘制环境的透明度
     context.rotate(angle); 方法旋转当前的绘图(注意参数是弧度PI); 如需将角度转换为弧度，请使用 degrees*Math.PI/180 公式进行计算。 6.画布限定区域绘制 ctx.clip(); 方法从原始画布中剪切任意形状和尺寸； 一旦剪切了某个区域，则所有之后的绘图都会被限制在被剪切的区域内（不能访问画布上的其他区域）； 一般配合绘制环境的保存和还原。  7.画布保存base64编码内容 把canvas绘制的内容输出成base64内容； 语法：canvas.toDataURL(type,encoderOptions)； 例如：canvas.toDataURL("image/jpg",1); 参数说明：type，设置输出的类型，比如 image/png image/jpeg等； encoderOptions： 0-1之间的数字，用于标识输出图片的质量，1表示无损压缩， 类型为： image/jpeg 或者image/webp才起作用；     案例1：
               var canvas = document.getElementById("canvas");
               var dataURL = canvas.toDataURL();
               console.log(dataURL);
               // "data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAUAAAAFCAYAAACNby
               // blAAAADElEQVQImWNgoBMAAABpAAFEI8ARAAAAAElFTkSuQmCC" 
              var img = document.querySelector("#img-demo");//拿到图片的dom对象        
              img.src = canvas.toDataURL("image/png");      //将画布的内容给图片标签显示
  8.画布渲染画布
          context.drawImage(img,x,y)；
           img参数也可以是画布，也就是把一个画布整体的渲染到另外一个画布上；                var canvas1 = document.querySelector('#cavsElem1');
    var canvas2 = document.querySelector('#cavsElem2');
    var ctx1 = canvas1.getContext('2d');
    var ctx2 = canvas2.getContext('2d');
    ctx1.fillRect(20, 20, 40, 40); //在第一个画布上绘制矩形 
           ctx2.drawImage(canvas1, 10, 10);   //将第一个画布整体绘制到第二个画布上
   9.了解贝塞尔曲线
       a.绘制一条二次方曲线
            quadratic：二次方的意思;
            Curve：曲线的意思;
            语法：context.quadraticCurveTo(cpx,cpy,x,y);
            参数:    cpx：贝塞尔控制点的 x 坐标;
 cpy：贝塞尔控制点的 y 坐标;
 x ：结束点的 x 坐标;
 y ：结束点的 y 坐标;        ctx.beginPath();
           ctx.moveTo(20,20);
            //绘制2次方曲线，贝赛尔曲线
            ctx.quadraticCurveTo(20,100,200,20);
            ctx.stroke();
       b.绘制贝塞尔曲线
      
      10.创建两条切线的弧 
        
     11.文本宽度计算
             context.measureText(text).width;
     12.判断点是否在路径中                     context.isPointInPath(x,y);
        //isPointInPath() 方法返回 true，如果指定的点位于当前路径中；否则返回 false。
        //判断x,y坐标的点是否在当前的路径中

如果以后做canvas游戏方向开发深入学习可以扩展内以下容：
     setTransform() 将当前转换重置为单位矩阵。然后运行 transform();
     transform() 替换绘图的当前转换矩阵;
     globalCompositeOperation 设置或返回新图像如何绘制到已有的图像上；
     像素操作。