js canvas图形 基本画布功能（二）

基本介绍

创建<canvas>元素的时候至少要设置width height属性。这样才能告诉浏览器在多大的地方进行绘制。在绘制之前首先要取到绘制的上下文，使用getContext()方法可以获取到绘制的上下文。为了确保浏览器对canvas的支持，最好先判断一下浏览器是否支持canvas.

2D 绘制上下文

2D绘制图形的方法包括矩形，弧形，路劲。2D上下文的坐标原点在（0,0）即canvas的左上角。所以的坐标都是基于这一点进行计算的。默认情况下x的最大值是width y最大值为height

填充和描边

2D上下文的基本绘制操作：填充和描边即fillStyle和strokeStyle
fillSyle:代表填充的颜色，类似于backgroundColor
strokeStyle:代表边框的颜色

绘制矩形

矩形是唯一一个可以直接在2D在上下文中绘制的图形。与矩形绘制相关的方法有fillRect() strokeRect() clearRect(),这些方法都接受4个参数：矩形的X参数，矩形y参数，矩形的宽度，矩形的高度。单位都是像素点。strokeRect创建的矩形有轮廓，clearRect()清楚某一个区域例如

    function rect() {
            let drawing = document.querySelector("canvas")
            if (drawing.getContext) {
                console.log("11111111")
                let context = drawing.getContext("2d")
                context.lineWidth = 5
                // context.fillStyle ="red"
                context.strokeStyle = "red"
                context.fillStyle = "orange"
                context.fillRect(10, 10, 50, 50)

                context.fillStyle = "rgba(0,0,255,0.5)"
                context.fillRect(30, 30, 50, 50)
                context.clearRect(40, 40, 10, 10)

            }
        }

image.png

绘制路径

2D绘制上下文支持很多在画布绘制路劲的方法。通过绘制路径和绘制复杂的形状和图形，绘制路径之前必须先调用beginPath方法表示开始绘制路劲，然后在调用一下方法
arc(x,y,radius,startAngle,endAngle,counterclockwise),已坐标（x,y）为圆心，已radius为半径绘制一条弧线，开始角度为startAngle，结束角度为endAngle，counterclockwise表示顺时针还是逆时针。默认为顺时针
lineTo(x,y) 绘制一条从上一点到（x,y）的直线
moveTo(x,y) 不绘制线，只是把光标绘制点移动到（x,y）点
以上三个方法实例如下

    function path() {
            console.log("2222222")
            let drawing = document.querySelector("canvas")
            if (drawing.getContext) {
                let context = drawing.getContext("2d")
                context.fillStyle = "orange"
                context.beginPath()
                context.arc(200,200,99,0,2*Math.PI,false)
                context.moveTo(294,200)
                context.arc(200,200,94,0,2*Math.PI,false)
                
                let fz = 100
                context.font = fz +"px Arial"
                while(context.measureText("hello wolrd").width >140) {
                    fz--
                context.font = fz +"px Arial"
                }
                context.fillText("hello wolrd",10,10)
                context.fillText("Font size is" +fz +"px",10,50)
                context.translate(200,200)
                context.rotate(2)
                context.moveTo(0,0)
                context.lineTo(0,-50)
                context.moveTo(0,0)
                context.lineTo(50,0)
                context.stroke()
            }
        }

image.png

arcTo(x1,y1,x2,y2,ranius):以给定的半径，经由（x1,y1）绘制一条从上一点到（x2,y2）的弧线

function basicPathDraw(){
            let drawing = document.querySelector("canvas")
            if (drawing.getContext) {
                var ctx=drawing.getContext("2d");
                ctx.beginPath();
                ctx.moveTo(20,20);           // 创建开始点
                ctx.lineTo(100,20);          // 创建水平线
                ctx.arcTo(150,20,150,70,50); // 创建弧
                ctx.lineTo(150,120);         // 创建垂直线
                ctx.stroke(); 
            }
        }

image.png

bezierCurveTo

bezierCurveTo(clx,cly,c2x,c2y,x,y)以（clx,cly）和（c2x,c2y）为控制点，绘制一条从上一点到（x,y）的弧线（三次曲线）

function bezierCurveTo(){
            let drawing = document.querySelector("canvas")
            if (drawing.getContext) {
                var ctx=drawing.getContext("2d");
                ctx.beginPath();
                ctx.moveTo(20,20);
                ctx.bezierCurveTo(20,100,200,100,200,20);
                ctx.stroke();
            }
        }

image.png

quadraticCurveTo

quadraticCurveTo(cx，cy,x,y)以（cx,cy）为控制点，绘制一条上一点到（x,y）的弧线（二次曲线）

image.png

路径是2D上下文的主要绘制机制。通过isPointInPath(x,y)方法来判断（x，y）是否在当前路劲上面

绘制文本

文本和图形的混合是最常见的绘制需求。文本的绘制通过上下文中的fillText 和strokeText。这两个方法都接受4参数。第一个是要绘制的字符串，x坐标，y坐标和可选的最大像素宽度。而且这两个方法最终绘制的结果取决于上下文中的以下三个属性
font:Css语法指定字体的样式 "blod 14px"
textAlign:文本的对齐方式 "start" "end"
textBaseLine:指定文本的基线

context.fillText("Font size is" +fz +"px",10,50)

对于复杂文本的绘制是一件很难得事情，比如在特定文字绘制到指定区域。因此2D上下文提供了用户辅助确定文本大小的measureText()方法，该方法接受一个参数，返回一个TextMetrics对象，返回对象只有一个属性width。用法如下

let fz = 100
                context.font = fz +"px Arial"
                while(context.measureText("hello wolrd").width >140) {
                    fz--
                context.font = fz +"px Arial"
                }
                context.fillText("hello wolrd",10,10)
                context.fillText("Font size is" +fz +"px",10,50)

变换

上下文变换可以操作绘制在画布的图像。以下方法用于改变绘制上下文图像的变换矩阵
rotate(ange):围绕原点把图像旋转angle弧度
scale(scaleX,scaleY) :x上乘上scaleX，y上乘上scaleY
translate(x,y)：把原点移动到（x,y）。执行这个操作之后原点变成了（x,y）
可以使用save（）方法保存context上下文设置，restroe()方法恢复之前的上下文设置

阴影

2D上下文可以根据以下属性自动改变相关或者路径上面的阴影
shadowColor:CSS属性值，表示要绘制的阴影颜色
shadowOffsetX/Y:阴影相对x/y坐标上面的偏移
shadowBlur:阴影的模糊程度

var ctx=drawing.getContext("2d");
                ctx.shadowOffsetX = 5
                ctx.shadowOffsetY = 5
                ctx.shadowBlur = 4
                ctx.shadowColor = "rgba(0,0,0,0.5)"
                ctx.fillStyle = "#ff0000"
                ctx.fillRect(30,30,50,50)

渐变

渐变通过CanvasGradient的实例表示。要创建一个新的线性渐变，可以调用上下文的createLinearGradient()方法，该方法需要4个参数，开始x坐标，开始y坐标，终点x坐标，终点y坐标。调用之后会创建一个实例对象。有了实例对象之后，使用addColorStop()方法为渐变指定色标。这个方法接受两个参数，第一个参数为色标，取值为0~1,0代表第一种颜色，1代表最后一种颜色。
还有一种渐变使用createRadiaGradient方法创建。这种渐变也叫放射性渐变。这个方法接受三个参数，前三个参数赛表一个圆的圆心x,y，半径，后三个参数代表后一个圆 圆心x,y和半径

function radialGradient(){
            let drawing = document.querySelector("canvas")
            
        if (drawing.getContext) {
            var ctx=drawing.getContext("2d");
            let gradient = ctx.createRadialGradient(80,80,10,80,80,30)
            gradient.addColorStop(0,"white")
            gradient.addColorStop(1,"black")
            ctx.fillStyle = "#ff0000"
            ctx.fillRect(10,10,50,50)
            ctx.fillStyle =gradient
            ctx.fillRect(30,30,100,100)
        }   
        }

image.png

数据图像

2D上下文可以通过getImageData()方法获取到原始图像的数据
实例如下

function imgData(){
            // let img = 
            // console.log(img)
            let drawing = document.querySelector("canvas")
                
            if (drawing.getContext) {
                var ctx=drawing.getContext("2d");
                let image = document.images[0],imageData,data,i,len,average,red,green,blue,alpha
                ctx.drawImage(image,0,0)
                imageData = ctx.getImageData(0,0,image.width,image.height)
                data = imageData.data
                for ( i = 0; i < data.length; i+=4) {
                    red = data[i]
                    green = data[i+1]
                    blue = data[i+2]
                    alpha = data[i+3]
                    average = Math.floor((red+green+blue)/3)
                    data[i] = average
                    data[i+1]= average
                    data[i+2] =average
                }
                imageData.data = data
                ctx.putImageData(imageData,0,0)
            }
        }

image.png

图形的合成

两个图像重叠可以使用globalCompositeOperation方法对两个图形进行重叠

function gloab(){
            let drawing = document.querySelector("canvas")
                
            if (drawing.getContext) {
                let ctx=drawing.getContext("2d");
                ctx.fillStyle = "#ff0000"
                ctx.fillRect(10,10,50,50)
                ctx.globalAlpha = 0.5
                // ctx.globalCompositeOperation = "source-in" //只绘制重叠部分（其他部分透明）
                // ctx.globalCompositeOperation = "source-out" //只绘制新图形不重叠部分（其他部分透明
                // ctx.globalCompositeOperation = "source-atop" //旧图不受影响，新图只绘制重叠部分
                // ctx.globalCompositeOperation = "destination-over" //新图在旧图s面，透明度根据旧图决定
                // ctx.globalCompositeOperation = "destination-in" //新图在旧图下面，只显示重叠部分，其他部分隐藏
                // ctx.globalCompositeOperation = "destination-out" //新图和旧图重叠部分完全透明
                // ctx.globalCompositeOperation = "destination-atop" //新图在旧图下面，旧图不重叠的地方透明
                // ctx.globalCompositeOperation = "lighter" //新图形与原有图形重叠部分像素相加，变得更加亮
                ctx.globalCompositeOperation = "copy" //新图形讲被擦除
                ctx.fillStyle = "#00ff00"
                ctx.fillRect(10,40,50,50)
                ctx.globalAlpha = 0.5
                
            }
        }