• Canvas绘图1

    一、绘图技术

    1.SVG矢量图：就是用标签代码画图 不是用像素来描绘的矩阵图像
                            是一种可伸缩的矢量图型，它基于XML并用于描述图形的语言
    2.canvas：画布 是H5出的技术 用js来画图 
    3.与图片image的区别：
          canvas和SVG都是代码  网络传输快 在大多数广告中使用
          img是图片编码  网络传输慢

    二、canvas认识

    • canvas元素自己就是图片 有自己的编码宽高 不设置就默认是300x150 
    • 通过属性设置canvas本身编码宽高    css设置渲染的宽高
    • 一般父元素宽高多大就设置canvas的编码宽高多大 避免失真
    • 建议不要设置css样式的宽高 直接改编码宽高或者父盒子宽高
    • 画布的'getContext()'方法返回一个“绘制上下文”对象  绝大多数的画布绘制API来自这个对象
    • 也就是说画布元素和他的上下文对象是两个完全不同的概念
    • 调用该方法时  传递的参数是“2d”，也就是`getContext('2d')` 代表可以在画布上绘制二维图像
    • canvas可以用于 双屏互动 大数据页面 柱状图 游戏 ...等等

     三、画布的尺寸和坐标

    • 画布以左上角(0, 0)为坐标原点
    • 往右为X轴的坐标不断增大
    • 往下为Y轴的坐标不断增大

         示例（一个简单的画布）： 

    1. <style>
    2.     #box {
    3.             border: 2px pink solid;
    4.     }
    5. style>
    6. <canvas id="box" width="300px" height="300px">这是一个画布canvas>
    7. <script>
    8.         var canvas = document.querySelector("#box")
    9.         var pen = canvas.getContext("2d")
    10. script>

      效果图：


    四、绘制线条

    1）说明：

    绘制线段的API是上下文对象的方法
    beginPath：开始定义一条新的路径
    ​moveTo：开始定义一条新的子路径 该方法确定了线段的起点
    lineTo：将上面定义的线段起点和指定的新的点连接起来
    ​fill()：填充区域 此时只是填  起点和终点并没有连接起来
    closePath：会把起点和终点连接起来
    stroke()：开始绘制图形，当前路径下的所有子路经都会绘制出来
    如果要接着绘制新的路径，需要重新调用beginPath()方法

      2） 示例（一根线条）：

    1. <style>
    2.     #box {
    3.             border: 2px pink solid;
    4.     }
    5. style>
    6. <canvas id="box" width="300px" height="300px">这是一个画布canvas>
    7. <script>
    8.         var canvas = document.querySelector("#box")
    9.         var pen = canvas.getContext("2d")
    10.         pen.moveTo(100, 200)
    11.         pen.lineTo(200, 300)
    12.         pen.stroke()
    13.  script>

      效果图：

      3）示例（三角形）：

    1. <style>
    2.     #box {
    3.             border: 2px pink solid;
    4.     }
    5. style>
    6. <canvas id="box" width="600px" height="600px">这是一个画布canvas>
    7. <script>
    8.         var canvas = document.querySelector("#box")
    9.         var ctx = canvas.getContext("2d") //获取上下文-代码  
    10.         ctx.lineWidth = 5 //线条的粗细
    11.         ctx.strokeStyle = "blue" //线条的颜色
    12.         //线条（三角形）
    13.         ctx.moveTo(100, 100)
    14.         ctx.lineTo(300, 300) //第一条线
    15.         ctx.moveTo(400, 100)
    16.         ctx.lineTo(100, 100) //第二条线
    17.         ctx.moveTo(400, 100)
    18.         ctx.lineTo(300, 300) //第三条线
    19.         //绘画
    20.         ctx.stroke()
    21. script>

      效果图：

      4）示例（折线心电图）：

    1. <style>
    2.     #box {
    3.             border: 2px pink solid;
    4.     }
    5. style>
    6. <script>
    7. "box" width="600px" height="600px">这是一个画布
    8. var canvas = document.querySelector("#box")
    9. var ctx = canvas.getContext("2d")
    10. //开启一条新（格子）轨迹
    11. ctx.beginPath() 
    12. var m = 10
    13. for (var i = 0; i < parseInt(600 / m); i++) {
    14. ctx.moveTo(0, i * m)
    15. ctx.lineTo(600, i * m)
    16. ctx.moveTo(i * m, 0)
    17. ctx.lineTo(i * m, 600)
    18. }
    19. ctx.stroke() 
    20.  
    21. //开启另外一条新的（坐标轴）轨迹
    22. ctx.beginPath()
    23. ctx.lineWidth = 4
    24. ctx.strokeStyle = "black"
    25. ctx.moveTo(50, 50)
    26. ctx.lineTo(50, 500)
    27. ctx.lineTo(500, 500)
    28. ctx.lineTo(480, 510)
    29. ctx.moveTo(500, 500)
    30. ctx.lineTo(480, 490)
    31. ctx.moveTo(50, 50)
    32. ctx.lineTo(60, 80)
    33. ctx.moveTo(50, 50)
    34. ctx.lineTo(40, 80)
    35. ctx.stroke()
    36.  
    37. //开启心跳的轨迹
    38. arr = [30, 60, 50, 90, 64, 80, 68, 99, 50, 65, 82]
    39. setInterval(() => {
    40.     arr.push(Math.random() * (120 - 50) + 50)
    41. }, 1000)
    42. setInterval(draw, 300)
    43. function draw() {
    44.          ctx.beginPath()
    45.          ctx.lineWidth = 2
    46.          ctx.strokeStyle = "red"
    47.          for (let i = 0; i < arr.length; i++) {
    48.                 ctx.lineTo(i * 30 + 60, 400 - arr[i])
    49.             }
    50.          ctx.stroke()
    51.  }
    52. script>

      效果图：

      5）示例（爱心图形）：

    1. <style>
    2.     #box {
    3.             border: 2px pink solid;
    4.     }
    5. style>
    6. <canvas id="box" width="600px" height="600px"> 这是一个画布canvas>
    7. <script>
    8.         var canvas = document.querySelector("#box")
    9.         var l = canvas1.getContext("2d")
    10.         l.beginPath() //开启一条新的轨迹
    11.         l.lineWidth = 5
    12.         l.strokeStyle = "red"
    13.         //绘制线条
    14.         l.moveTo(160, 260)
    15.         l.lineTo(220, 180)
    16.         l.lineTo(300, 240)
    17.         l.lineTo(380, 180)
    18.         l.lineTo(450, 260)
    19.         l.lineTo(300, 400)
    20.         l.moveTo(300, 400)
    21.         l.lineTo(160, 260)
    22.         //绘制心形图形
    23.         l.stroke()
    24. script>

      效果图： 

    五、绘制矩形

     1）说明：

    rect()：在当前子路经添加一条弧线

    • 语法：context.rect(x,y,width,height)
    • 参数： 起点坐标x,y：左上角坐标； 宽度width：矩形的宽度； 高度height：矩形的高度

    strokeRect()：可以直接绘制一个矩形

    • 语法：context.strokeRect(x,y,width,height)

     2） 示例（绘制矩形框）：

    1. <style>
    2.         #box {
    3.             border: 2px black solid;
    4.         }
    5. style>
    6. <canvas id="box" width="600px" height="600px">画布canvas>
    7. <script>
    8.         var canvas = document.querySelector("#box")
    9.         var ctx = canvas.getContext("2d")
    10.         //1.用线条绘制矩形框
    11.         ctx.moveTo(200,300)
    12.         ctx.lineTo(200,500)
    13.         ctx.lineTo(400,500)
    14.         ctx.lineTo(400,300)
    15.         ctx.lineWidth=5
    16.         ctx.strokeStyle="red"  //绘制线条的颜色
    17.         ctx.fillStyle="pink"      //闭合区域的颜色
    18.         ctx.fill()//闭合图形填充颜色  默认黑色
    19.         ctx.closePath()
    20.         ctx.stroke()
    21.  
    22.         //2.直接绘制矩形框
    23.         ctx.rect(200,100,300,400)
    24.         ctx.fillStyle="black"   
    25.         ctx.fill()
    26.         ctx.stroke()
    27.  
    28.         //3.直接绘制带颜色的矩形框
    29.         ctx.fillStyle="green"
    30.         ctx.fillRect(200,100,300,400)
    31.         ctx.stroke()
    32.  
    33.  //以上任选一种绘制矩形
    34.  script>

       效果图：

      3）示例（柱状图）：

    1. <style>
    2.        #box1 {
    3.             border: 2px rgb(130, 176, 225) solid;
    4.         }
    5. style>
    6. <canvas id="box1" width="600px" height="600px">柱状图canvas>
    7.     <script>
    8.         var canvas1 = document.querySelector("#box1")
    9.         var ctx1 = canvas1.getContext("2d")
    10.         var arr=[1000,300,500,680,700,900,2000]
    11.         ctx1.lineWidth = 1
    12.         ctx1.lineTo(50, 500)
    13.         ctx1.lineTo(580, 500)
    14.         ctx1.stroke()
    15.        
    16.         let h=450/2000
    17.         for(i=0;ilength;i++){
    18.             ctx1.beginPath()
    19.             ctx1.fillStyle = "lightblue"
    20.             ctx1.fillRect(100+i*70,500-h*arr[i], 50, h*arr[i]) 
    21.         }
    22. script>

      效果图：

     

    六、绘制弧线

     1）说明：

    arc()：在当前子路经添加一条弧线
       语法：context.arc(x,y,r,sAngle,eAngle,counterclockwise);

    参数  描述
    x圆的中心的 x 坐标
    y圆的中心的 y 坐标
    r圆的半径
    sAngle起始角  以弧度计（弧的圆形的三点钟位置是 0 度）
    eAngle结束角  以弧度计
    counterclockwise可选 规定绘图方向   False = 顺时针 true = 逆时针

      2）示例（一条弧线）： 

    1. <style>
    2.         #box {
    3.             border: 2px black solid;
    4.         }
    5. style>
    6. <canvas id="box" width="600px" height="600px">画布canvas>
    7. <script>
    8.         var canvas = document.querySelector("#box")
    9.         var ctx = canvas.getContext("2d")
    10.         //用线条绘制
    11.         let deg = Math.PI / 180  //单位度数
    12.         ctx.arc(300, 300, 200, 40 * deg, 90* deg)
    13.                   //x       y      r     startdeg  endedg  position 
    14.         ctx.strokeStyle = "red"
    15.         ctx.stroke()
    16. script>

      效果图：

      3）示例（时钟）：

    1. <style>
    2.     #box1 {
    3.             border: 2px rgb(130, 176, 225) solid;
    4.        }
    5. style>
    6. <canvas id="box1" width="600px" height="600px">时钟canvas>
    7. <script>
    8.         var canvas1 = document.querySelector("#box1")
    9.         var ctx1 = canvas1.getContext("2d")
    10.         var deg1 = Math.PI / 180 //单位度数
    11.         function biaopan() {
    12.             var r = 200
    13.             var x1 = 300
    14.             var y1 = 300
    15.             var kedu = 10
    16.             ctx1.arc(x1, y1, r, 0, 360 * deg1)
    17.             var n = 6
    18.             for (let i = 0; i < 60; i++) {
    19.                 let a;
    20.                 if (i % 5) {
    21.                     a = kedu
    22.                 } else {
    23.                     a = kedu * 2
    24.                 }
    25.                 var y2 = y1 + r * Math.sin(i * n * deg1)
    26.                 var x2 = x1 + r * Math.cos(i * n * deg1)
    27.                 var y3 = y1 + (r - a) * Math.sin(i * n * deg1)
    28.                 var x3 = x1 + (r - a) * Math.cos(i * n * deg1)
    29.                 ctx1.moveTo(x2, y2)
    30.                 ctx1.lineTo(x3, y3)
    31.             }
    32.             ctx1.stroke()
    33.         }
    34.  
    35.         function zhen() {
    36.             var sh = 160
    37.             var s = new Date().getSeconds()
    38.             var hh = 100        
    39.             var hm = 140        
    40.             //秒针
    41.             ctx1.moveTo(300, 300)
    42.             var y4 = 300 + sh * Math.sin(s * 6 * deg1)
    43.             var x4 = 300 + sh * Math.cos(s * 6 * deg1)
    44.             ctx1.lineTo(x4, y4)
    45.             //时针
    46.             ctx1.moveTo(300, 300)
    47.             var y5 = 300 + hh * Math.sin(s * 0.5 / 60 * deg1)
    48.             var x5 = 300 + hh * Math.cos(s * 0.5 / 60 * deg1)
    49.             ctx1.lineTo(x5, y5)
    50.             //分钟
    51.             ctx1.moveTo(300, 300)
    52.             var y6 = 300 + hm * Math.sin(s * 0.1 * deg1)
    53.             var x6 = 300 + hm * Math.cos(s * 0.1 * deg1)
    54.             ctx1.lineTo(x6, y6)
    55.  
    56.             ctx1.stroke()
    57.  
    58.         }
    59.         setInterval(() => {
    60.             canvas1.width = canvas.width
    61.             biaopan()
    62.             zhen()
    63.         }, 1000)
    64. script>

      效果图：

      4）示例（评分五角星）：

    1. <style>
    2.         .rank {
    3.             width: 400px;
    4.             height: 100px;
    5.         }
    6. style>
    7. <h1>请你打分:h1>
    8. <div class="rank">div>
    9. <script>
    10.         //封装的函数
    11.         Object.prototype.addrank = function (n = 0, color = "gray", oncolor = "yellow") {
    12.             this.onmousemove = function (e) {
    13.                 var n = Math.ceil((e.pageX - this.offsetLeft) / (this.offsetHeight + 5))
    14.                 this.innerHTML=""
    15.                 this.addrank(n)
    16.             }
    17.  
    18.             var canvas = document.createElement("canvas")
    19.             var ctx = canvas.getContext("2d")
    20.             canvas.width = (this.offsetHeight + 5) * 5
    21.             canvas.height = this.offsetHeight
    22.             this.appendChild(canvas)
    23.             for (let i = 0; i < 5; i++) {
    24.                 if (i < n) {
    25.                     ctx.drawstar(canvas.height / 2 + canvas.height * i + 5, canvas.height / 2, canvas.height / 2,
    26.                         oncolor)
    27.                 } else {
    28.                     ctx.drawstar(canvas.height / 2 + canvas.height * i + 5, canvas.height / 2, canvas.height / 2,
    29.                         color)
    30.                 }
    31.  
    32.             }
    33.         }
    34.         Object.prototype.drawstar = function (x, y, r, color = "yellow") {
    35.             this.beginPath()
    36.             var startAngle = -90
    37.             var deg = Math.PI / 180
    38.             var arr = []
    39.             for (let i = 0; i < 5; i++) {
    40.                 var point = {
    41.                     x: x + r * Math.cos((i * 72 + startAngle) * deg),
    42.                     y: y + r * Math.sin((i * 72 + startAngle) * deg)
    43.                 }
    44.                 arr.push(point)
    45.             }
    46.             //135241 024130五角星的点连线
    47.             this.moveTo(arr[0].x, arr[0].y)
    48.             this.lineTo(arr[2].x, arr[2].y)
    49.             this.lineTo(arr[4].x, arr[4].y)
    50.             this.lineTo(arr[1].x, arr[1].y)
    51.             this.lineTo(arr[3].x, arr[3].y)
    52.             this.lineTo(arr[0].x, arr[0].y)
    53.             this.strokeStyle = color
    54.             this.fillStyle = color
    55.             this.fill()
    56.             this.stroke()
    57.         }
    58. script>
    59. <script>
    60.         var rankdiv = document.querySelector(".rank")
    61.         rankdiv.addrank()
    62. script>

      效果图：

      5）示例（饼状图）：

    1. <style>
    2.       #box {
    3.             border: 2px black solid;
    4.         }
    5. style>
    6. <canvas id="box" width="600px" height="600px">画布canvas>
    7. <script>
    8.         var canvas = document.querySelector("#box")
    9.         var ctx = canvas.getContext("2d")
    10.         var arr=[{name:"衣",money:2000},{name:"食",money:7000},{name:"住",money:5000},{name:"行",money:500}]
    11.         arr.total=0
    12.         for(let i=0;ilength;i++){
    13.             arr.total=arr.total+arr[i].money
    14.         }
    15.         var start=0
    16.         let deg = Math.PI / 180 
    17.         arr.forEach(el=>{
    18.             ctx.beginPath()
    19.             var r=parseInt(Math.random()*255)
    20.             var g=parseInt(Math.random()*255)
    21.             var b=parseInt(Math.random()*255)
    22.             ctx.fillStyle =`rgb(${r},${g},${b})`
    23.             var n=(el.money/arr.total)*360
    24.             ctx.arc(300,300,200,start*deg,(start+n)*deg)
    25.             //绘制文本
    26.             let textAng=start+n/2
    27.             var textx=300+(200+30)*Math.cos(textAng*deg)
    28.             var texty=300+(200+30)*Math.sin(textAng*deg)
    29.             ctx.fillText(el.name,textx,texty)
    30.             ctx.lineTo(300,300)
    31.             start=start+n
    32.             ctx.fill()
    33.             ctx.stroke()
    34.         })
    35. script>

      效果图：

  • 相关阅读:
    安信可Ai-WB1系列固件烧录指导
    好莱坞罢工事件！再次警醒人类重视AI监管，人工智能矛盾一触即发！
    pdffactory pro 8中文破解版
    FPGA之旅设计99例之第二十二例----Sobel算法边沿检测
    C和指针 第10章 结构和联合 10.10 问题
    P1600 [NOIP2016 提高组] 天天爱跑步
    内存中的buffer与cache
    java程序设计项目案例化教程题库及答案
    Redis安装教程（保姆级教程）
    中文Stable Diffusion模型太乙使用教程
  • 原文地址：https://blog.csdn.net/qq_56668869/article/details/125965011