canvas基础2 -- 形状

七巧板

七巧板本质上就是 分别由几个直线 拼成一个个图形,再将这些图形结合起来

复制代码
var tangram = [
      { p: [{ x: 0, y: 0 }, { x: 800, y: 0 }, { x: 400, y: 400 }], color: "#caff67" },
      { p: [{ x: 0, y: 0 }, { x: 400, y: 400 }, { x: 0, y: 800 }], color: "#67beef" },
      { p: [{ x: 800, y: 0 }, { x: 800, y: 400 }, { x: 600, y: 600 }, { x: 600, y: 200 }], color: "#ef3d61" },
      { p: [{ x: 600, y: 200 }, { x: 600, y: 600 }, { x: 400, y: 400 }], color: "#f9f5la" },
      { p: [{ x: 400, y: 400 }, { x: 600, y: 600 }, { x: 400, y: 800 }, { x: 200, y: 600 }], color: "#a594c0" },
      { p: [{ x: 200, y: 600 }, { x: 400, y: 800 }, { x: 0, y: 800 }], color: "#fa8ecc" },
      { p: [{ x: 800, y: 400 }, { x: 800, y: 800 }, { x: 400, y: 800 }], color: "#f6ca29" }
    ]
    const canvas = document.getElementById('canvas')
    canvas.width = 800
    canvas.height = 800
    const context = canvas.getContext('2d')

    for (let i = 0; i < tangram.length; i++) {
      draw(tangram[i], context)
    }

    function draw(piece, cxt) {
      cxt.beginPath()
      cxt.moveTo(piece.p[0].x, piece.p[0].y)
      for (var i = 1; i < piece.p.length; i++) {
        cxt.lineTo(piece.p[i].x, piece.p[i].y)
      }
      cxt.closePath()

      cxt.fillStyle = piece.color
      cxt.fill()

      cxt.strokeStyle = "black"
      cxt.lineWidth = 3
      cxt.stroke()
    }

图示:

箭头

复制代码
    context.beginPath()
    context.moveTo(100, 350) 
    context.lineTo(500, 350) 
    context.lineTo(500, 200) 
    context.lineTo(700, 400)
    context.lineTo(500, 600)
    context.lineTo(500, 450)
    context.lineTo(100, 450)
    context.closePath()
    
    context.lineWidth = 5  
    context.strokeStyle = '#058'

    context.stroke() 

图示:

1

相关推荐
牧杉-惊蛰3 小时前
disable-devtool 网络安全 禁止打开控制台
前端·css·vue.js
阿部多瑞 ABU3 小时前
新增模块介绍:教师代课统计系统(由社区 @记得微笑 贡献)
开源·html·ai编程
CoderYanger3 小时前
前端基础-HTML入门保姆级课堂笔记
前端·javascript·css·html
蓝胖子的多啦A梦5 小时前
低版本Chrome导致弹框无法滚动的解决方案
前端·css·html·chrome浏览器·版本不同造成问题·弹框页面无法滚动
ะัี潪ิื7 小时前
精灵图(雪碧图)的生成和使用
java·css
iuuia8 小时前
02--CSS基础
前端·css
苦夏木禾8 小时前
css实现表格中最后一列固定
前端·javascript·css
Dcc13 小时前
纯 css 实现前端主题切换+自定义方案
前端·css
珹洺14 小时前
Java-Spring入门指南(二十四)SSM整合HTML:解决CSS/JS静态资源被过滤问题
java·spring·html
CodeCraft Studio15 小时前
Excel处理控件Aspose.Cells教程:使用 Python 将 HTML 转换为 Excel
python·html·excel·aspose·aspose.cells·html转excel