day-5-canvas绘图

 

目录

绘制长方形的两种方法

绘制圆形     

绘制线段     

绘制二次贝塞尔曲线             

绘制三次贝塞尔曲线             

绘制图片   

绘制视频   

绘制文字     

绘制文字阴影     

线性渐变

径向渐变

画布变换

重合显示状态 

---

---

调用canvas图形库

<canvas width="500" height="400" id="canvas"></canvas>

        //获取画布
        var canvas = document.getElementById('canvas')
        //获取2D画笔
        var cxt = canvas.getContext('2d')

绘制长方形的两种方法

方法1     cxt.rect(x,y,w,h)    //绘制长方形路径     

               cxt.fill()        //绘制实心长方形     

              cxt.stroke()        //绘制空心长方形

方法2     cxt.fillRect(x,y,w,h)    //绘制实心长方形     

              cxt.strokeRect(x,y,w,h)    //绘制空心长方形

 

 

绘制圆形     

                       cxt.arc(x,y,r,起始角度,终止角度,方向)

绘制线段     

               cxt.beginPath()    //断开和上次路径的联系       

               cxt.moveTo(x0,y0)      //将画笔移动到x0，y0

                cxt.lineTo(x1,y1)     //添加画到x1，y1位置的线段

               cxt.lineTo(x2,y2)         //添加画到x2，y2位置的线段

               cxt.closePath()    //闭合本次路径    

 

绘制二次贝塞尔曲线             

               二次贝塞尔曲线有一个控制点  x0,y0表示 控制点的坐标     

               cxt.quadraticCurveTo(x0,y0,x1,y1)    

绘制三次贝塞尔曲线             

               三次贝塞尔曲线有两个控制点   x0,y0    x1,y1 分别表示两个控制点的坐标     

               cxt.quadraticCurveTo(x0,y0,x1,y1,x2,y2)

绘制图片   

                cxt.drawImage(图片节点,x,y,w,h)         

               cxt.drawImage(图片节点,sx,sy,sw,sh,x,y,w,h)    裁切图片

绘制视频   

                cxt.drawImage(视频节点,x,y,w,h)    

绘制文字     

             cxt.font = ’20px  微软雅黑’        //设置字体大小和字体系列     

             cxt.textAlign = left/right/center    //设置文本相对于起始点的位置     

             cxt.textBaseLine = top/bottom/hanging/middle    //设置文本的相对于基线的竖直位置     

             cxt.fillText(文字,x,y)        //在x,y处绘制文字

绘制文字阴影     

             cxt.shadowOffsetX = 数值     

             cxt.shaodowOffsetY = 数值     

             cxt.shadowColor = 颜色     

             cxt.shadowBlur = 数值    0-1       

             cxt.measureText(文本)         测量文本的宽度

             cxt.strokeStyle = 颜色        设置绘制空心图形画笔的颜色

             cxt.fillStyle = 颜色        设置绘制实心图形画笔的颜色

             cxt.lineWidth = 数值        设置画笔的宽度值

             cxt.lineCap = butt/round/square     设置线段的两端样式     butt为默认值

             cxt.lineJoin = miter/round/bevel    设置两个线段连接处的样式     miter为默认值

线性渐变

           var color = cxt.createLinearGradient(x1,y1,x2,y2)    创建线性渐变     x1,y1  为渐变的起点         x2,y2    为渐变的终点                    color.addColorStop(0,颜色1)     //渐变起点色

           color.addColorStop(0.5,颜色2)

           color.addColorStop(1,颜色3) //渐变终点色

           cxt.fillStyle = color        //让画笔应用该线性渐变

径向渐变

           var color = cxt.createRadialGradient(x1,y1,r1,x2,y2,r2)        

           //创建径向渐变     x1,y1,r1    为渐变的起始圆     x2,y2,r2    为渐变的终止圆

           color.addColorStop(0,颜色1)    //渐变起点色

           color.addColorStop(0.5,颜色2)

           color.addColorStop(1,颜色3) //渐变终点色

           cxt.fillStyle = color        //让画笔应用该线性渐变

画布变换

            cxt.createImageData(w,h)    创建w*h的区域来存储像素点

           cxt.getImageData(x,y,w,h)    从x,y点开始获取w*h区域的像素点

           cxt.putImageData(数据,x,y)    从x,y点开始往画布里填充数据

           cxt.translate(x,y)        改变画布的起始点位置

           cxt.rotate(角度)        围绕画布起点旋转指定角度 

           cxt.scale(x,y)            清空画布

重合显示状态 

        cxt.globalCompositeOperation  设置两个图片的重合部分的显示情况
    

属性值	作用
source-over	默认 源图像在上面
source-atop	超过目标图像的源图像全都不可见 目标图像是可见的
source-in	只有在目标图像之内的源图像是可见的 目标图像是不见的
source-out	只有在目标图像之外的源图像是可见的 目标图像是不见的
destination-over	目标图像在上面
destination-atop	超过源图像的目标图像全都不可见 源图像是可见的
destination-in	只有在源图像之内的目标图像是可见的 源图像是不见的
destination-out	只有在源图像之外的目标图像是可见的 源图像是不见的
xor	设置两个图像重合的部分透明