文章目录

画笔颜色设置
全局透明度
渐变色
pattern印章填充样式
线条样式
- 实线样式
- 虚线样式
阴影

画笔颜色设置

ctx.strokeStyle = "颜色"：设置轮廓描绘颜色
ctx.fillStyle = "颜色"：设置填充颜色
eg：


<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    <!--  -->
    <canvas
    id = "canvas1"
    width="600"
    height="600"
    style="background: lightgray"
    ></canvas>

    <script>
        // 找到画布
        var canvas1 = document.getElementById("canvas1")
        // 获取画笔(这里是2d画笔)
        var ctx = canvas1.getContext("2d")

        // 绘制图形
        ctx.beginPath()
        ctx.moveTo(200,300)
        ctx.quadraticCurveTo(150,300,150,200)
        ctx.quadraticCurveTo(150,100,300,100)
        ctx.quadraticCurveTo(450,100,450,200)
        ctx.quadraticCurveTo(450,300,250,300)
        ctx.quadraticCurveTo(250,350,150,350)
        ctx.quadraticCurveTo(200,350,200,300)

        // 修改绘制轮廓的颜色
        ctx.strokeStyle = "red"
        ctx.stroke()

        // 修改填充颜色 
        ctx.fillStyle = "rgba(255,200,200,0.3)"
        ctx.fill()

        ctx.closePath()

    </script>
</body>
</html>

在这里插入图片描述

全局透明度

画笔.globalAlpha = 0到1的数字

eg：

 var canvas1 = document.getElementById("canvas1")
 // 获取画笔(这里是2d画笔)
 var ctx = canvas1.getContext("2d")
 ctx.globalAlpha = 0.3

渐变色

线性渐变

定义渐变：
画笔.createLinearGradient(x1,y1,x2,y2) ： x1、y1渐变的起点；x2、y2渐变的终点
linearGradient.addColorStop(0,"red")：设置渐变的颜色：0表示起点颜色，1表示终点颜色

eg:

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    <!--  -->
    <canvas
    id = "canvas1"
    width="600"
    height="600"
    style="background: lightgray"
    ></canvas>

    <script>
        // 找到画布
        var canvas1 = document.getElementById("canvas1")
        // 获取画笔(这里是2d画笔)
        var ctx = canvas1.getContext("2d")

        // 渐变色
        // createLinearGradient(x1,y1,x2,y2)， x1\y1渐变的起点，x2\y2渐变的终点
        let linearGradient = ctx.createLinearGradient(100,200,400,400)
        // addColorStop设置渐变颜色 0表示起点颜色，1表示终点颜色
        linearGradient.addColorStop(0,"red")
        // linearGradient.addColorStop(0.5,"#ffcccc")
        linearGradient.addColorStop(1,"blue")
        // 将渐变设置为填充样式
        ctx.fillStyle = linearGradient

        ctx.rect(100, 200, 300, 200)
        ctx.fill()


    </script>
</body>
</html>

在这里插入图片描述

动画渲染

效果：
白色条动态的从左上角移动到右下角
在这里插入图片描述

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    <!--  -->
    <canvas
    id = "canvas1"
    width="600"
    height="600"
    style="background: lightgray"
    ></canvas>

    <script>
        // 找到画布
        var canvas1 = document.getElementById("canvas1")
        // 获取画笔(这里是2d画笔)
        var ctx = canvas1.getContext("2d")

        let index = 0

        function render(){
      
      
            ctx.clearRect(0,0,600,600)
            index+=0.01;
            if(index>1){
      
      
                index = 0
            }
            let linearGradient = ctx.createLinearGradient(100,200,400,400)
            linearGradient.addColorStop(0,"red")
            linearGradient.addColorStop(index,"rgba(255,255,255,0.5)")
            linearGradient.addColorStop(1,"blue")
            ctx.fillStyle = linearGradient
            ctx.rect(100, 200, 300, 200)
            ctx.fill()
            requestAnimationFrame(render)
        }

        // 动画渲染
        requestAnimationFrame(render)

    </script>
</body>
</html>

径向渐变

从圆心向外渐变。
createRadialGradient(x1,y1,r1,x2,y2,r2): x1,y1,r1表示以(x1,y1)为坐标r1为半径的圆，x2,y2,r2表示以(x2,y3)为坐标r2为半径的圆。
radialGradient.addColorStop(0,"red"):表示起点的颜色
radialGradient.addColorStop(1,"blue"):表示终点的颜色
eg：

扫描二维码关注公众号，回复： 14555311 查看本文章

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    <!--  -->
    <canvas
    id = "canvas1"
    width="600"
    height="600"
    style="background: lightgray"
    ></canvas>

    <script>
        // 找到画布
        var canvas1 = document.getElementById("canvas1")
        // 获取画笔(这里是2d画笔)
        var ctx = canvas1.getContext("2d")

        let index = 0

        // createRadialGradient(x1,y1,r1,x2,y2,r2)
        // x1,y1,r1表示以(x1,y1)为坐标r1为半径的园，x2,y2,r2表示以(x2,y3)为坐标r2为半径的原
        let radialGradient = ctx.createRadialGradient(300,300,0,300,300,200)
         radialGradient.addColorStop(0,"red")
         // radialGradient.addColorStop(index,"rgba(255,255,255,0.5)")
         radialGradient.addColorStop(1,"blue")
         ctx.fillStyle = radialGradient
         ctx.rect(0, 0, 600, 600)
         ctx.fill()
        //     requestAnimationFrame(render)
        // }

    </script>
</body>
</html>

在这里插入图片描述
圆形：

let radialGradient = ctx.createRadialGradient(300,300,0,300,300,200)
 radialGradient.addColorStop(0,"red")
 // radialGradient.addColorStop(index,"rgba(255,255,255,0.5)")
 radialGradient.addColorStop(1,"blue")
 ctx.fillStyle = radialGradient
 ctx.arc(300,300, 200,0, Math.PI*2)
 ctx.fill()

在这里插入图片描述

球体描绘

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    <!--  -->
    <canvas
    id = "canvas1"
    width="600"
    height="600"
    style="background: lightgray"
    ></canvas>

    <script>
        // 找到画布
        var canvas1 = document.getElementById("canvas1")
        // 获取画笔(这里是2d画笔)
        var ctx = canvas1.getContext("2d")

        let radialGradient = ctx.createRadialGradient(200,200,10,300,300,200)
        radialGradient.addColorStop(0,"white")
        radialGradient.addColorStop(1,"blue")
        ctx.fillStyle = radialGradient
        ctx.arc(300,300, 200,0, Math.PI*2)
        ctx.fill() 

    </script>
</body>
</html>

在这里插入图片描述

圆锥渐变

createConeGradient(r,x1,y1) r：开始渐变的角度，(x1, y1)渐变旋转的圆心
eg：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    <!--  -->
    <canvas
    id = "canvas1"
    width="600"
    height="600"
    style="background: lightgray"
    ></canvas>

    <script>
        // 找到画布
        var canvas1 = document.getElementById("canvas1")
        // 获取画笔(这里是2d画笔)
        var ctx = canvas1.getContext("2d")

        // createConeGradient(r,x1,y1):r：开始渐变的角度，x1，y1渐变旋转的圆心
        let coneGradient = ctx.createConicGradient(0,300,300)
        coneGradient.addColorStop(0,"white")
        coneGradient.addColorStop(1,"blue")
        ctx.fillStyle = coneGradient
        ctx.rect(0,0, 600,600)
        ctx.fill() 

    </script>
</body>
</html>

效果：
在这里插入图片描述

pattern印章填充样式

createPattern(img,重复方式：repeat、no-repeat、repeat-x、repeat-y)
eg:

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    <!--  -->
    <canvas
    id = "canvas1"
    width="600"
    height="600"
    style="background: lightgray"
    ></canvas>

    <script>
        // 找到画布
        var canvas1 = document.getElementById("canvas1")
        // 获取画笔(这里是2d画笔)
        var ctx = canvas1.getContext("2d")

        //createPattern(img,重复方式：repeat、no-repeat、repeat-x、repeat-y) 
        var img = new Image()
        img.src = "./QQ截图20230114005019.png"
        img.onload = function(){
      
      
            let pattern = ctx.createPattern(img, "repeat")
            ctx.fillStyle = pattern
            ctx.rect(0,0, 600,600)
            ctx.fill() 
        }
    </script>
</body>
</html>

在这里插入图片描述

线条样式

实线样式

画笔.lineWidth：线条宽度,默认1px
画笔.lineCap：线条末端样式
butt平齐；round半圆； square正方形(线段末尾就会多出来一个正方形)
画笔.lineJoin：线条与线条连接处的样式，只设置外侧的连接效果
mitter尖角，round圆角，bevel平角。
画笔.miterLimit：当lineJoin设置为尖角时有起作用，用于设置线条的尖角的最大长度，超过该长度以平角显示。

eg:

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    <!--  -->
    <canvas
    id = "canvas1"
    width="600"
    height="600"
    style="background: lightgray"
    ></canvas>

    <script>
        // 找到画布
        var canvas1 = document.getElementById("canvas1")
        // 获取画笔(这里是2d画笔)
        var ctx = canvas1.getContext("2d")

        // 线条宽度,默认1px
        ctx.lineWidth = 40;

        // 线条末端样式，butt平齐，round半圆， square正方形(线段末尾就会多出来一个正方形)
        ctx.lineCap = "round"

        // 设置线条与线条连接处的样式（只设置外侧的连接效果）， mitter尖角，round圆角，bevel平角，
        ctx.lineJoin = "mitter"
        // 设置最大尖角长度
        ctx.miterLimit = 1

        ctx.moveTo(200,150)
        ctx.lineTo(300,200)
        ctx.lineTo(400,150)

        ctx.stroke();
    </script>
</body>
</html>

在这里插入图片描述

虚线样式

画笔.setLineDash([线段长度，空白长度])：setLineDash方法接受一个数组，来指定线段与间隙的交替。
画笔.lineDashOffset = 偏移量: 属性设置起始偏移量。

eg：设置虚线的动态偏移

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    <!--  -->
    <canvas
    id = "canvas1"
    width="600"
    height="600"
    style="background: lightgray"
    ></canvas>

    <script>
        // 找到画布
        var canvas1 = document.getElementById("canvas1")
        var ctx = canvas1.getContext("2d")


        let index = 0
        function render(){
      
      
            ctx.clearRect(0,0,600,600)
            index ++;
            if(index>40){
      
      
                index = 0;
            }
            ctx.lineWidth = 1;
            ctx.lineCap = "round"
            ctx.lineJoin = "mitter"

            // 设置虚线
            ctx.setLineDash([10,5])
            ctx.lineDashOffset = index

            ctx.moveTo(150,150)
            ctx.lineTo(300,200)
            ctx.lineTo(450,150)

            ctx.stroke();

            // 请求动画帧
            requestAnimationFrame(render)
        }

        requestAnimationFrame(render)

    </script>
</body>
</html>

在这里插入图片描述

阴影

画笔.shadowOffsetX ：水平偏移量
画笔.shadowOffsetY ：垂直偏移量
画笔.shadowBlur ：阴影模糊度
画笔.shadowColor ：阴影颜色

eg：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    <!--  -->
    <canvas
    id = "canvas1"
    width="600"
    height="600"
    style="background: lightgray"
    ></canvas>

    <script>
        // 找到画布
        var canvas1 = document.getElementById("canvas1")
        var ctx = canvas1.getContext("2d")

        ctx.lineWidth = 1;
        // 设置虚线
        ctx.setLineDash([10,5])

        // 设置阴影
        // 水平偏移量
        ctx.shadowOffsetX = 10
        // 垂直偏移量
        ctx.shadowOffsetY = 10
        // 模糊度
        ctx.shadowBlur = 10
        // 阴影颜色
        ctx.shadowColor = "red"

        ctx.moveTo(150,150)
        ctx.lineTo(300,200)
        ctx.lineTo(450,150)

        ctx.stroke();

    </script>
</body>
</html>

在这里插入图片描述

Canvas——样式和颜色控制

文章目录

画笔颜色设置

全局透明度

渐变色

线性渐变

动画渲染

径向渐变

球体描绘

圆锥渐变

pattern印章填充样式

线条样式

实线样式

虚线样式

阴影

猜你喜欢