• canvas基础1

    直线

    1. <!DOCTYPE html>
    2. <html lang="en">
    3. <head>
    4.   <meta charset="UTF-8">
    5.   <meta name="viewport" content="width=device-width, initial-scale=1.0">
    6.   <title>Document</title>
    7. </head>
    8. <body>
    9.   <canvas id="canvas" style="border:1px solid #ccc;margin:50px;"></canvas>
    10.  
    11.   <script>
    12.     const canvas = document.getElementById('canvas')
    13.     canvas.width = 1024
    14.     canvas.height = 768
    15.     const context = canvas.getContext('2d')
    16.  
    17.     // 绘制直线
    18.     context.moveTo(100, 90) // 笔尖移动到 x:100 y:90 的位置
    19.     context.lineTo(700, 600) // 画一条直线到 x: 700 y: 600 的位置
    20.     context.lineWidth = 5  // 设置直线宽度为 5
    21.     context.strokeStyle = '#005588'  // 设置直线颜色
    22.  
    23.     // 以上只是设置直线状态，并未开始画
    24.     context.stroke() // 将之前描述的线条状态画出来  stroke用于绘制线条
    25.  
    26.   </script>
    27. </body>
    28. </html>

    图示：

    线条的属性

    lineCap

    butt: 默认  

    round

    square

    设置线条 2端 的形态，2条线条相交处设置无效

    1.     context.lineWidth = 50
    2.     context.strokeStyle = '#058'
    3.  
    4.     context.beginPath()
    5.     context.moveTo(100, 200)
    6.     context.lineTo(700, 200)
    7.     context.lineCap = 'butt'
    8.     context.stroke()
    9.     
    10.     context.beginPath()
    11.     context.moveTo(100, 400)
    12.     context.lineTo(700, 400)
    13.     context.lineCap = 'round'
    14.     context.stroke()
    15.  
    16.     context.beginPath()
    17.     context.moveTo(100, 600)
    18.     context.lineTo(700, 600)
    19.     context.lineCap = 'square'
    20.     context.stroke()
    21.  
    22.     // 基线，用于对比lineCap的三种属性
    23.     context.lineWidth = 1
    24.     context.strokeStyle = '#27a'
    25.     context.beginPath()
    26.     context.moveTo(100, 100)
    27.     context.lineTo(100, 700)
    28.     context.moveTo(700, 100)
    29.     context.lineTo(700, 700)
    30.     context.stroke()

    图示：

    lineJoin

    miter：默认  尖角形状

    bevel：连接斜面

    round：圆角

    设置2条线条相交时的形态

    miter:

    1.     const canvas = document.getElementById('canvas')
    2.     canvas.width = 800
    3.     canvas.height = 800
    4.     const context = canvas.getContext('2d')
    5.  
    6.     const posX = 400
    7.     const posY = 0
    8.     const bigRadius = 300
    9.     const smallRadius = 150
    10.  
    11.     context.lineWidth = 10
    12.     context.lineJoin = 'miter'
    13.     drawStar(context, smallRadius, bigRadius, posX, posY, 0)
    14.     
    15.  
    16.     function drawStar(cxt, r, R, x, y, rot=0) {
    17.       cxt.beginPath()
    18.       for (let i = 0; i < 5; i++) {
    19.         cxt.lineTo(
    20.           Math.cos((18 + i * 72 - rot) / 180 * Math.PI) * R + x,
    21.           -Math.sin((18 + i * 72 - rot) / 180 * Math.PI) * R + x
    22.         )
    23.         cxt.lineTo(
    24.           Math.cos((54 + i * 72 - rot) / 180 * Math.PI) * r + x,
    25.           -Math.sin((54 + i * 72 - rot) / 180 * Math.PI) * r + x
    26.         )
    27.       }
    28.       cxt.closePath()
    29.       context.stroke()
    30.     }

    图示：

    bevel：

    context.lineJoin = 'bevel'

    图示：

    round：

    context.lineJoin = 'round'

    图示：

    miter

    当线条属性 lineJoin 为 miter  时有效，

    内角和外角之间的距离

    默认为 10

    矩形

    rect(x, y, width, height)

    x: 矩形左上角的 x 坐标

    y: 矩形左上角的 y 坐标

    width: 矩形的宽度

    height: 矩形的高度

    fillRect(x, y, width, height)  绘制矩形并填充颜色

    strokeRect(x, y, width, height)  绘制矩形并描边

    后面绘制的图形会覆盖前面的图形

    1.     context.lineWidth = 5
    2.     context.strokeStyle = '#058'
    3.     context.fillStyle = 'red'
    4.  
    5.     context.beginPath()
    6.     context.rect(100, 100, 400, 300)
    7.     context.closePath()
    8.     context.fill()
    9.     context.stroke()
    10.     
    11.     context.fillStyle = 'green'
    12.  
    13.     context.beginPath()
    14.     context.fillRect(300, 300, 400, 300)
    15.     context.strokeRect(300, 300, 400, 300)
    16.     context.closePath()

    图示：

    多边形

    多边形就是多个线条连接起来

    1.     // 绘制多边形
    2.     context.moveTo(100, 90) // 笔尖移动到 x:100 y:90 的位置
    3.     context.lineTo(700, 600) // 画一条直线到 x: 700 y: 600 的位置
    4.     context.lineTo(100, 600)
    5.     context.lineTo(100, 90)
    6.  
    7.     context.fillStyle = 'rgb(2, 100, 30)'  // 设置形状内的填充色
    8.     context.fill()    // 填充颜色
    9.  
    10.     context.lineWidth = 5  // 设置直线宽度为 5
    11.     context.strokeStyle = '#005588'  // 设置直线颜色
    12.  
    13.     // 以上只是设置直线状态，并未开始画
    14.     context.stroke() // 将之前描述的线条状态画出来  stroke用于绘制线条

    图示:

    多条线段

    灵活使用 moveTo 函数，调整笔尖位置开始绘制

    1.     context.moveTo(100, 200) 
    2.     context.lineTo(300, 400) 
    3.     context.lineTo(100, 600) 
    4.  
    5.     context.moveTo(300, 200) 
    6.     context.lineTo(500, 400)
    7.     context.lineTo(300, 600)
    8.  
    9.     context.moveTo(500, 200) 
    10.     context.lineTo(700, 400)
    11.     context.lineTo(500, 600)
    12.  
    13.     context.lineWidth = 5  
    14.     context.strokeStyle = '#058'
    15.  
    16.     context.stroke()

    图示：

    多个图形

    stroke函数 会将所有内容重新绘制，因此后面设置的线段的宽度、颜色等会覆盖之前的设定

    需要用 beginPath 声明重新绘制一个线段， 这样 stroke函数 将从 beiginPath 开始绘制

    closePath 会将 未闭合 的图形 用直线 将图形闭合

    1.     // 绘制多个图形
    2.     context.beginPath()
    3.     context.moveTo(100, 90) // 笔尖移动到 x:100 y:90 的位置
    4.     context.lineTo(700, 600) // 画一条直线到 x: 700 y: 600 的位置
    5.     context.lineTo(100, 600)
    6.     context.lineTo(100, 90)
    7.     context.closePath()
    8.  
    9.     context.fillStyle = 'rgb(2, 100, 30)'  // 设置形状内的填充色
    10.     context.fill()    // 填充颜色
    11.  
    12.     context.lineWidth = 5  // 设置直线宽度为 5
    13.     context.strokeStyle = '#005588'  // 设置直线颜色
    14.  
    15.     // 以上只是设置直线状态，并未开始画
    16.     context.stroke() // 将之前描述的线条状态画出来  stroke用于绘制线条
    17.  
    18.     context.beginPath()
    19.     context.moveTo(200, 100)
    20.     context.lineTo(800, 600)
    21.     context.closePath()
    22.  
    23.     context.strokeStyle = 'black'
    24.     context.stroke()

    图示：

    弧线

    arc

    context.arc(centerx, centery, radius, startingAngle, endingAngle, anticlockwise = false)

    centerx: x坐标
    centery: y坐标
    radius: 半径
    startingAngle: 从哪个弧度值开始
    endingAngle: 结束于哪个弧度值
    anticlockwise: 是否逆时针绘制,默认为 false,也就是顺时针绘制

    弧度值

    无论是顺时针绘制还是逆时针绘制，弧度制是不变的

    顺时针：

    1. // 绘制弧线
    2.     /*
    3.         context.arc(centerx, centery, radius, startingAngle, endingAngle, anticlockwise = false)
    4.         centerx: x坐标
    5.         centery: y坐标
    6.         radius: 半径
    7.         startingAngle: 从哪个弧度值开始
    8.         endingAngle: 结束于哪个弧度值
    9.         anticlockwise: 是否逆时针绘制,默认为 false,也就是顺时针绘制
    10.     */
    11.     context.lineWidth = 5
    12.     context.strokeStyle = '#005588'
    13.     context.arc(300, 300, 200, 0, 1.5*Math.PI)
    14.     context.stroke()

    图示：

    逆时针：

    1. context.lineWidth = 5
    2. context.strokeStyle = '#005588'
    3. context.arc(300, 300, 200, 0, 1.5*Math.PI, true)
    4. context.stroke()

    图示：

    arcTo

    将上文 moveTo 或 lineTo 的坐标作为 x0,y0

    代码：

    1. <!DOCTYPE html>
    2. <html lang="en">
    3.  
    4. <head>
    5.   <meta charset="UTF-8">
    6.   <meta name="viewport" content="width=device-width, initial-scale=1.0">
    7.   <title>Document</title>
    8. </head>
    9.  
    10. <body>
    11.   <canvas id="canvas" style="border:1px solid #ccc;display:block;margin:50px auto;"></canvas>
    12.  
    13.   <script>
    14.     const canvas = document.getElementById('canvas')
    15.     canvas.width = 800
    16.     canvas.height = 800
    17.     const context = canvas.getContext('2d')
    18.  
    19.     arcToTest(context, 150, 100, 650, 100, 650, 600, 300)
    20.  
    21.     function arcToTest(cxt, x0, y0, x1, y1, x2, y2, R) {
    22.       context.beginPath()
    23.       context.moveTo(x0, y0)
    24.       context.arcTo(x1, y1, x2, y2, R)
    25.  
    26.       context.lineWidth = 6
    27.       context.strokeStyle = 'red'
    28.       context.stroke()
    29.  
    30.       // baseline
    31.       context.beginPath()
    32.       context.moveTo(x0, y0)
    33.       context.lineTo(x1, y1)
    34.       context.lineTo(x2, y2)
    35.  
    36.       context.lineWidth = 2
    37.       context.strokeStyle = 'gray'
    38.       context.stroke()
    39.     }
    40.  
    41.   </script>
    42. </body>
    43.  
    44. </html>

    图示：

    贝塞尔二次曲线

    参考网站

    Canvas Quadratic Curve Example

    贝塞尔三次曲线

    Canvas Bézier Curve Example

    椭圆

    1. <!DOCTYPE html>
    2. <html lang="en">
    3.  
    4. <head>
    5.   <meta charset="UTF-8">
    6.   <meta name="viewport" content="width=device-width, initial-scale=1.0">
    7.   <title>Document</title>
    8. </head>
    9.  
    10. <body>
    11.   <canvas id="canvas" style="border: 1px solid #aaa;display:block;margin: 20px auto;"></canvas>
    12.   
    13.   <script>
    14.     const canvas = document.getElementById('canvas')
    15.     canvas.width = 800
    16.     canvas.height = 800
    17.     const context = canvas.getContext('2d')
    18.  
    19.     context.beginPath()
    20.     context.ellipse(400, 400, 300, 200, 0, 0, Math.PI*2)
    21.     context.stroke()
    22.  
    23.     
    24.   </script>
    25. </body>
    26.  
    27. </html>

    图示：

    线性渐变

    1.     const canvas = document.getElementById('canvas')
    2.     canvas.width = 800
    3.     canvas.height = 800
    4.     const context = canvas.getContext('2d')
    5.  
    6.     const linearGrad = context.createLinearGradient(0, 0, 800, 800)
    7.     linearGrad.addColorStop(0.0, '#fff')
    8.     linearGrad.addColorStop(0.25, 'yellow')
    9.     linearGrad.addColorStop(0.5, 'green')
    10.     linearGrad.addColorStop(0.75, 'blue')
    11.     linearGrad.addColorStop(1.0, '#000')
    12.     context.fillStyle = linearGrad
    13.     context.fillRect(0, 0, 800, 800)

    图示：

    水平渐变

    const linearGrad = context.createLinearGradient(0, 0, 800, 0)

    垂直渐变

    const linearGrad = context.createLinearGradient(0, 0, 0, 800)

    径向渐变

    1.     const canvas = document.getElementById('canvas')
    2.     canvas.width = 800
    3.     canvas.height = 800
    4.     const context = canvas.getContext('2d')
    5.  
    6.     const linearGrad = context.createRadialGradient(400, 400, 100, 400, 400, 500)
    7.     linearGrad.addColorStop(0.0, '#fff')
    8.     linearGrad.addColorStop(0.25, 'yellow')
    9.     linearGrad.addColorStop(0.5, 'green')
    10.     linearGrad.addColorStop(0.75, 'blue')
    11.     linearGrad.addColorStop(1.0, '#000')
    12.     context.fillStyle = linearGrad
    13.     context.fillRect(0, 0, 800, 800)

    图示：

    图片填充

    createPattern

    1.     const canvas = document.getElementById('canvas')
    2.     canvas.width = 800
    3.     canvas.height = 800
    4.     const context = canvas.getContext('2d')
    5.  
    6.     const backgroundImage = new Image()
    7.     backgroundImage.src = 'a.jpg'
    8.     backgroundImage.onload = function() {
    9.       const pattern = context.createPattern(backgroundImage, 'repeat')
    10.       context.fillStyle = pattern
    11.       context.fillRect(0, 0, 800, 800)
    12.     }

    图示：

    文字渲染

    文字渲染

    1. <!DOCTYPE html>
    2. <html lang="en">
    3.  
    4. <head>
    5.   <meta charset="UTF-8">
    6.   <meta name="viewport" content="width=device-width, initial-scale=1.0">
    7.   <title>Document</title>
    8. </head>
    9.  
    10. <body>
    11.   <canvas id="canvas" style="border:1px solid #ccc;display:block;margin:50px auto;"></canvas>
    12.  
    13.   <script>
    14.     const canvas = document.getElementById('canvas')
    15.     canvas.width = 800
    16.     canvas.height = 800
    17.     const context = canvas.getContext('2d')
    18.  
    19.     context.font = 'bold 40px Arial'
    20.     context.fillStyle = '#058'
    21.     context.fillText('欢迎大家学习《Canvas绘图接口详解》!', 40, 100)
    22.     
    23.   </script>
    24. </body>
    25.  
    26. </html>

    图示：

    文字描边

    1. <!DOCTYPE html>
    2. <html lang="en">
    3.  
    4. <head>
    5.   <meta charset="UTF-8">
    6.   <meta name="viewport" content="width=device-width, initial-scale=1.0">
    7.   <title>Document</title>
    8. </head>
    9.  
    10. <body>
    11.   <canvas id="canvas" style="border:1px solid #ccc;display:block;margin:50px auto;"></canvas>
    12.  
    13.   <script>
    14.     const canvas = document.getElementById('canvas')
    15.     canvas.width = 800
    16.     canvas.height = 800
    17.     const context = canvas.getContext('2d')
    18.  
    19.     context.font = 'bold 40px Arial'
    20.     context.fillStyle = '#058'
    21.     context.fillText('欢迎大家学习《Canvas绘图接口详解》!', 40, 100)
    22.  
    23.     context.lineWidth = 1
    24.     context.strokeStyle = '#058'
    25.     context.strokeText('欢迎大家学习《Canvas绘图接口详解》!', 40, 200)
    26.     
    27.   </script>
    28. </body>
    29.  
    30. </html>

    图示：

    设置文字的宽度

    1. <!DOCTYPE html>
    2. <html lang="en">
    3.  
    4. <head>
    5.   <meta charset="UTF-8">
    6.   <meta name="viewport" content="width=device-width, initial-scale=1.0">
    7.   <title>Document</title>
    8. </head>
    9.  
    10. <body>
    11.   <canvas id="canvas" style="border:1px solid #ccc;display:block;margin:50px auto;"></canvas>
    12.  
    13.   <script>
    14.     const canvas = document.getElementById('canvas')
    15.     canvas.width = 800
    16.     canvas.height = 800
    17.     const context = canvas.getContext('2d')
    18.  
    19.     context.font = 'bold 40px Arial'
    20.     context.fillStyle = '#058'
    21.     context.fillText('欢迎大家学习《Canvas绘图接口详解》!', 40, 100)
    22.  
    23.     context.lineWidth = 1
    24.     context.strokeStyle = '#058'
    25.     context.strokeText('欢迎大家学习《Canvas绘图接口详解》!', 40, 200)
    26.  
    27.     context.fillText('欢迎大家学习《Canvas绘图接口详解》!', 40, 300, 400)
    28.     context.strokeText('欢迎大家学习《Canvas绘图接口详解》!', 40, 400, 400)
    29.     
    30.   </script>
    31. </body>
    32.  
    33. </html>

    图示：

    文字渐变样式

    1. <!DOCTYPE html>
    2. <html lang="en">
    3.  
    4. <head>
    5.   <meta charset="UTF-8">
    6.   <meta name="viewport" content="width=device-width, initial-scale=1.0">
    7.   <title>Document</title>
    8. </head>
    9.  
    10. <body>
    11.   <canvas id="canvas" style="border:1px solid #ccc;display:block;margin:50px auto;"></canvas>
    12.  
    13.   <script>
    14.     const canvas = document.getElementById('canvas')
    15.     canvas.width = 800
    16.     canvas.height = 800
    17.     const context = canvas.getContext('2d')
    18.  
    19.     context.font = 'bold 40px Arial'
    20.     context.fillStyle = '#058'
    21.     context.fillText('欢迎大家学习《Canvas绘图接口详解》!', 40, 100)
    22.  
    23.     context.lineWidth = 1
    24.     context.strokeStyle = '#058'
    25.     context.strokeText('欢迎大家学习《Canvas绘图接口详解》!', 40, 200)
    26.  
    27.     context.fillText('欢迎大家学习《Canvas绘图接口详解》!', 40, 300, 400)
    28.     context.strokeText('欢迎大家学习《Canvas绘图接口详解》!', 40, 400, 400)
    29.  
    30.     const linearGrad = context.createLinearGradient(0, 0, 800, 0)
    31.     linearGrad.addColorStop(0.0, 'red')
    32.     linearGrad.addColorStop(0.25, 'orange')
    33.     linearGrad.addColorStop(0.5, 'yellow')
    34.     linearGrad.addColorStop(0.75, 'green')
    35.     linearGrad.addColorStop(1.0, 'purple')
    36.     context.fillStyle = linearGrad
    37.     context.fillText('欢迎大家学习《Canvas绘图接口详解》!', 40, 500)
    38.     
    39.   </script>
    40. </body>
    41.  
    42. </html>

    图示：

    设置文字背景

    1. <!DOCTYPE html>
    2. <html lang="en">
    3.  
    4. <head>
    5.   <meta charset="UTF-8">
    6.   <meta name="viewport" content="width=device-width, initial-scale=1.0">
    7.   <title>Document</title>
    8. </head>
    9.  
    10. <body>
    11.   <canvas id="canvas" style="border:1px solid #ccc;display:block;margin:50px auto;"></canvas>
    12.  
    13.   <script>
    14.     const canvas = document.getElementById('canvas')
    15.     canvas.width = 800
    16.     canvas.height = 800
    17.     const context = canvas.getContext('2d')
    18.  
    19.     context.font = 'bold 40px Arial'
    20.     context.fillStyle = '#058'
    21.     context.fillText('欢迎大家学习《Canvas绘图接口详解》!', 40, 100)
    22.  
    23.     context.lineWidth = 1
    24.     context.strokeStyle = '#058'
    25.     context.strokeText('欢迎大家学习《Canvas绘图接口详解》!', 40, 200)
    26.  
    27.     context.fillText('欢迎大家学习《Canvas绘图接口详解》!', 40, 300, 400)
    28.     context.strokeText('欢迎大家学习《Canvas绘图接口详解》!', 40, 400, 400)
    29.  
    30.     const linearGrad = context.createLinearGradient(0, 0, 800, 0)
    31.     linearGrad.addColorStop(0.0, 'red')
    32.     linearGrad.addColorStop(0.25, 'orange')
    33.     linearGrad.addColorStop(0.5, 'yellow')
    34.     linearGrad.addColorStop(0.75, 'green')
    35.     linearGrad.addColorStop(1.0, 'purple')
    36.     context.fillStyle = linearGrad
    37.     context.fillText('欢迎大家学习《Canvas绘图接口详解》!', 40, 500)
    38.  
    39.     const backgroundImage = new Image()
    40.     backgroundImage.src = 'a.jpg'
    41.     backgroundImage.onload = function () {
    42.       const pattern = context.createPattern(backgroundImage, 'repeat')
    43.       context.fillStyle = pattern
    44.       context.font = 'bold 100px Arial'
    45.       context.fillText('Canvas', 40, 650)
    46.       context.strokeText('Canvas', 40, 650)
    47.     }
    48.     
    49.   </script>
    50. </body>
    51.  
    52. </html>

    图示：

    设置字体

    font-style

    normal (默认)

    italic     (斜体字)

    oblique (倾斜字体)

    font-variant

    normal (默认)

    small-caps (小型大写字母)

    例：context.font = 'small-caps bold 40px sans-serif'

    font-weight

    lighter

    normal (默认)

    bold

    bolder

    font-size

    20px (默认)

    2em

    150%

    font-family

    设置多种字体备选

    支持 @font-face

    Web安全字体

    文本对齐

    水平对齐

    context.textAlign =  left

                                    center

                                    right

    1. <!DOCTYPE html>
    2. <html lang="en">
    3.  
    4. <head>
    5.   <meta charset="UTF-8">
    6.   <meta name="viewport" content="width=device-width, initial-scale=1.0">
    7.   <title>Document</title>
    8. </head>
    9.  
    10. <body>
    11.   <canvas id="canvas" style="border:1px solid #ccc;display:block;margin:50px auto;"></canvas>
    12.  
    13.   <script>
    14.     const canvas = document.getElementById('canvas')
    15.     canvas.width = 800
    16.     canvas.height = 800
    17.     const context = canvas.getContext('2d')
    18.  
    19.     context.font = 'bold 40px Arial'
    20.     context.fillStyle = '#058'
    21.  
    22.     context.textAlign = 'left'
    23.     context.fillText('textAlign = left', 400, 100)
    24.  
    25.     context.textAlign = 'center'
    26.     context.fillText('textAlign = center', 400, 200)
    27.  
    28.     context.textAlign = 'right'
    29.     context.fillText('textAlign = right', 400, 300)
    30.  
    31.  
    32.     // baseline
    33.     context.strokeStyle = '#888'
    34.     context.moveTo(400, 0)
    35.     context.lineTo(400, 800)
    36.     context.stroke()
    37.     
    38.     
    39.   </script>
    40. </body>
    41.  
    42. </html>

    图示：

    垂直对齐

    context.textBaseline =  top

                                         middle

                                         bottom

    1. <!DOCTYPE html>
    2. <html lang="en">
    3.  
    4. <head>
    5.   <meta charset="UTF-8">
    6.   <meta name="viewport" content="width=device-width, initial-scale=1.0">
    7.   <title>Document</title>
    8. </head>
    9.  
    10. <body>
    11.   <canvas id="canvas" style="border:1px solid #ccc;display:block;margin:50px auto;"></canvas>
    12.  
    13.   <script>
    14.     const canvas = document.getElementById('canvas')
    15.     canvas.width = 800
    16.     canvas.height = 800
    17.     const context = canvas.getContext('2d')
    18.  
    19.     context.font = 'bold 40px Arial'
    20.     context.fillStyle = '#058'
    21.  
    22.     context.textBaseline = 'top'
    23.     context.fillText('textBaseline = top', 40, 100)
    24.     drawBaseline(context, 100)
    25.  
    26.     context.textBaseline = 'middle'
    27.     context.fillText('textBaseline = middle', 40, 200)
    28.     drawBaseline(context, 200)
    29.  
    30.     context.textBaseline = 'bottom'
    31.     context.fillText('textBaseline = bottom', 40, 300)
    32.     drawBaseline(context, 300)
    33.  
    34.     function drawBaseline(cxt, h) {
    35.       const width = cxt.canvas.width
    36.       cxt.save()
    37.       cxt.strokeStyle = '#888'
    38.       cxt.lineWidth = 2
    39.       cxt.moveTo(0, h)
    40.       cxt.lineTo(width, h)
    41.       cxt.stroke()
    42.       cxt.restore()
    43.     }
    44.     
    45.   </script>
    46. </body>
    47.  
    48. </html>

    图示：

    文本的度量

    context.measureText(string).width  获取文本的宽度

    1. <!DOCTYPE html>
    2. <html lang="en">
    3.  
    4. <head>
    5.   <meta charset="UTF-8">
    6.   <meta name="viewport" content="width=device-width, initial-scale=1.0">
    7.   <title>Document</title>
    8. </head>
    9.  
    10. <body>
    11.   <canvas id="canvas" style="border:1px solid #ccc;display:block;margin:50px auto;"></canvas>
    12.  
    13.   <script>
    14.     const canvas = document.getElementById('canvas')
    15.     canvas.width = 800
    16.     canvas.height = 800
    17.     const context = canvas.getContext('2d')
    18.  
    19.     context.font = 'bold 40px Arial'
    20.     context.fillStyle = '#058'
    21.     context.fillText('欢迎大家学习《Canvas绘图接口详解》!', 40, 100)
    22.     
    23.     const textWidth = context.measureText('欢迎大家学习《Canvas绘图接口详解》!').width
    24.     context.fillText('以上字符串的宽度为' + textWidth + 'px', 40, 200)
    25.   </script>
    26. </body>
    27.  
    28. </html>

    图示：

    阴影

    context.shadowColor   阴影的颜色

    context.shadowOffsetX   阴影的位移值

    context.shadowOffsetY   阴影的位移值

    context.shadowBlur   阴影的模糊程度  如果为0不模糊  值越大，越模糊

    1. <!DOCTYPE html>
    2. <html lang="en">
    3.  
    4. <head>
    5.   <meta charset="UTF-8">
    6.   <meta name="viewport" content="width=device-width, initial-scale=1.0">
    7.   <title>Document</title>
    8. </head>
    9.  
    10. <body>
    11.   <canvas id="canvas" style="border:1px solid #ccc;display:block;margin:50px auto;"></canvas>
    12.  
    13.   <script>
    14.     const canvas = document.getElementById('canvas')
    15.     canvas.width = 800
    16.     canvas.height = 800
    17.     const context = canvas.getContext('2d')
    18.  
    19.     context.fillStyle = '#058'
    20.     
    21.     context.shadowColor = 'gray'
    22.     context.shadowOffsetX = 20
    23.     context.shadowOffsetY = 20
    24.     context.shadowBlur = 5
    25.  
    26.     context.fillRect(200, 200, 400, 400)
    27.   </script>
    28. </body>
    29.  
    30. </html>

    图示：

    global

    globalAlpha

    让全局 绘制的图像 具有透明度

    默认值： 1

    1. <!DOCTYPE html>
    2. <html lang="en">
    3.  
    4. <head>
    5.   <meta charset="UTF-8">
    6.   <meta name="viewport" content="width=device-width, initial-scale=1.0">
    7.   <title>Document</title>
    8. </head>
    9.  
    10. <body>
    11.   <canvas id="canvas" style="border:1px solid #ccc;display:block;margin:50px auto;"></canvas>
    12.  
    13.   <script>
    14.     const canvas = document.getElementById('canvas')
    15.     canvas.width = 1200
    16.     canvas.height = 800
    17.     const context = canvas.getContext('2d')
    18.  
    19.     context.globalAlpha = 0.7
    20.     for(let i = 0; i < 100; i++) {
    21.       const R = Math.floor(Math.random() * 255)
    22.       const G = Math.floor(Math.random() * 255)
    23.       const B = Math.floor(Math.random() * 255)
    24.  
    25.       context.fillStyle = `rgb(${R}, ${G}, ${B})`
    26.  
    27.       context.beginPath()
    28.       context.arc(Math.random()*canvas.width, Math.random()*canvas.height, Math.random()*100, 0, Math.PI*2)
    29.       context.fill()
    30.     }
    31.   </script>
    32. </body>
    33.  
    34. </html>

    图示：

    globalCompositeOperation

    绘制的图像所产生的效果

    1. <!DOCTYPE html>
    2. <html lang="en">
    3.  
    4. <head>
    5.   <meta charset="UTF-8">
    6.   <meta name="viewport" content="width=device-width, initial-scale=1.0">
    7.   <title>Document</title>
    8.   <style>
    9.     #buttons {
    10.       width: 1200px;
    11.       margin: 10px auto;
    12.       display: flex;
    13.     }
    14.  
    15.     #buttons a {
    16.       font-size: 18px;
    17.       margin-right: 14px;
    18.     }
    19.   </style>
    20. </head>
    21.  
    22. <body>
    23.   <canvas id="canvas" style="border:1px solid #ccc;display:block;margin:10px auto;"></canvas>
    24.  
    25.   <div id="buttons">
    26.     <a href="#">source-over</a>
    27.     <a href="#">source-atop</a>
    28.     <a href="#">source-in</a>
    29.     <a href="#">source-out</a>
    30.     <a href="#">destination-over</a>
    31.     <a href="#">destination-atop</a>
    32.     <a href="#">destination-in</a>
    33.     <a href="#">destination-out</a>
    34.     <a href="#">lighter</a>
    35.     <a href="#">copy</a>
    36.     <a href="#">xor</a>
    37.   </div>
    38.  
    39.   <script>
    40.     const canvas = document.getElementById('canvas')
    41.     canvas.width = 1200
    42.     canvas.height = 800
    43.     const context = canvas.getContext('2d')
    44.  
    45.     draw(context, 'source-over')
    46.  
    47.     const buttons = document.getElementsByTagName('a')
    48.     for (let i = 0; i < buttons.length; i++) {
    49.       buttons[i].onclick = function() {
    50.         draw(context, this.text)
    51.         return false
    52.       }
    53.     }
    54.  
    55.     function draw(ctx, compositeStyle) {
    56.       ctx.clearRect(0, 0, ctx.canvas.width, ctx.canvas.height)
    57.  
    58.       // draw title
    59.       ctx.font = 'bold 40px Arial'
    60.       ctx.textAlign = 'center'
    61.       ctx.textBaseline = 'middle'
    62.       ctx.fillStyle = '#058'
    63.       ctx.fillText('globalCompositeOperation = ' + compositeStyle, ctx.canvas.width/2, 60)
    64.  
    65.       // draw a rect
    66.       ctx.fillStyle = 'blue'
    67.       ctx.fillRect(300, 150, 500, 500)
    68.  
    69.       // draw a triangle
    70.       ctx.globalCompositeOperation = compositeStyle
    71.       ctx.fillStyle = 'red'
    72.       ctx.beginPath()
    73.       ctx.moveTo(700, 250)
    74.       ctx.lineTo(1000, 750)
    75.       ctx.lineTo(400, 750)
    76.       ctx.closePath()
    77.       ctx.fill()
    78.     }
    79.   </script>
    80. </body>
    81.  
    82. </html>

    source-over  后绘制的图像压盖在前面绘制的图像上  （默认）

    source-atop

    source-in

    source-out

    destination-over  前面绘制的图像压盖在后面绘制的图像上

    destination-atop

    destination-in

    destination-out

    lighter

    copy （只绘制最后一个图形）

    xor   图形之间进行 异或 操作

    剪辑区域

    context.clip()

    1. <!DOCTYPE html>
    2. <html lang="en">
    3.  
    4. <head>
    5.   <meta charset="UTF-8">
    6.   <meta name="viewport" content="width=device-width, initial-scale=1.0">
    7.   <title>Document</title>
    8. </head>
    9.  
    10. <body>
    11.   <canvas id="canvas" style="border:1px solid #ccc;display:block;margin:10px auto;"></canvas>
    12.   </div>
    13.  
    14.   <script>
    15.     const canvas = document.getElementById('canvas')
    16.     canvas.width = 800
    17.     canvas.height = 800
    18.     const context = canvas.getContext('2d')
    19.  
    20.     context.beginPath()
    21.     context.fillStyle = 'black'
    22.     context.fillRect(0, 0, canvas.width, canvas.height)
    23.  
    24.     context.beginPath()
    25.     context.arc(400, 400, 150, 0, Math.PI*2)
    26.     context.fillStyle = '#fff'
    27.     context.fill()
    28.     context.clip()
    29.  
    30.     context.font = 'bold 150px Arial'
    31.     context.textAlign = 'center'
    32.     context.textBaseline = 'middle'
    33.     context.fillStyle = '#058'
    34.     context.fillText('CANVAS', canvas.width / 2, canvas.height / 2)
    35.  
    36.     
    37.   </script>
    38. </body>
    39.  
    40. </html>

    图示：

    isPointInPath

    context.isPointInPath(x, y)

    确定坐标是否在某个图形内

    扩展 canvas 的 context

    1. <!DOCTYPE html>
    2. <html lang="en">
    3.  
    4. <head>
    5.   <meta charset="UTF-8">
    6.   <meta name="viewport" content="width=device-width, initial-scale=1.0">
    7.   <title>Document</title>
    8. </head>
    9.  
    10. <body>
    11.   <canvas id="canvas" style="border: 1px solid #aaa;display:block;margin: 20px auto;"></canvas>
    12.   
    13.   <script>
    14.     CanvasRenderingContext2D.prototype.fillStar = function(r, R, x, y, rot) {
    15.       this.beginPath()
    16.       for (let i = 0; i < 5; i++) {
    17.         this.lineTo(
    18.           Math.cos((18 + i * 72 - rot) / 180 * Math.PI) * R + x,
    19.           -Math.sin((18 + i * 72 - rot) / 180 * Math.PI) * R + y
    20.         )
    21.         this.lineTo(
    22.           Math.cos((54 + i * 72 - rot) / 180 * Math.PI) * r + x,
    23.           -Math.sin((54 + i * 72 - rot) / 180 * Math.PI) * r + y
    24.         )
    25.       }
    26.       this.closePath()
    27.       this.fill()
    28.     }
    29.  
    30.     const canvas = document.getElementById('canvas')
    31.     canvas.width = 800
    32.     canvas.height = 800
    33.     const context = canvas.getContext('2d')
    34.  
    35.     context.fillStyle = '#058'
    36.     context.fillStar(150, 300, 400, 400, 0)
    37.     
    38.   </script>
    39. </body>
    40.  
    41. </html>

    图示：

    1

  • 相关阅读:
    【广州华锐互动】三维全景3D消防科普展馆
    xubuntu16.04系统中隐藏网络连接的弹窗提示
    k3s 搭建高可用rancher
    金融日 | 看金融机构数据安全建设典型案例
    【@property的参数copy Objective-C语言】
    【递归】树形结构、list转map
    基于SSM的酒店客房管理系统设计与实现
    CPU流水线与指令乱序执行
    Facebook内容的类型
    设计模式-迭代器模式（Iterator）
  • 原文地址：https://blog.csdn.net/m0_38066007/article/details/133745657