canvas-04 着色

一、图形着色区域：

描边区域：strokeStyle代表了描边样式，描边区域的绘制方法是stroke()、strokeRect()、strokeText();

填充区域：fillStyle代表了填充样式，填充区域的绘制方法是fill()、fillRect()、fillText()。

二、图形的着色方式：

纯色：与css一致 ； ctx.fillStyle = "gray"; ctx.strokeStyle = "gray";

        let canvas = document.querySelector("#canvas");

        const ctx = canvas.getContext("2d"); 

        ctx.fillStyle = "gray";

        ctx.beginPath();

        ctx.arc(300,200,100,0,Math.PI*2)

        ctx.fill();

三、渐变:

步骤：建立渐变对象的方式；为渐变添加颜色节点；赋值；

线性渐变： ctx.createLinearGradient(x1,y1,x2,y2) ；

        let canvas = document.querySelector("#canvas");

        const ctx = canvas.getContext("2d"); 

        // 建立渐变对象的方式： 线性渐变

        const gr = ctx.createLinearGradient(50,50,300,300)  //左上角到右下角

        // 为渐变添加颜色节点

        gr.addColorStop(0,"red");

        gr.addColorStop(0.5,"yellow");

        gr.addColorStop(1,"green");

        //为样式赋值

        ctx.fillStyle = gr ;

        //绘图

        ctx.fillRect(50,50,350,350)

线性渐变

径向渐变： createRadialGradient(圆心1x,圆心1y,半径1，圆心2x,圆心2y,半径2，)

        const gr = ctx.createRadialGradient(300,300,50,300,300,200) 

        gr.addColorStop(0,"red");

        gr.addColorStop(0.5,"yellow");

        gr.addColorStop(1,"green");

        ctx.fillStyle = gr ;

        ctx.fillRect(50,50,600,600)

径向渐变

纹理: const gr = ctx.createPattern(image,"repeat|repeat-x|repeat-y|no-repeat")；ctx.createPattern(图像源,重复方式)

        const img = new Image();

        img.src = "./images/floor.jpg";

        img.onload = function(){

            const pt = ctx.createPattern(img,"repeat");

            ctx.fillStyle = pt;

            ctx.fillRect(0,0,canvas.width,canvas.height)

        }

纹理