likes
comments
collection
share

canvas基础1 - 画直线(通俗易懂)

作者站长头像
站长
· 阅读数 39

系列文章目录

本文开始是canvas,通俗易懂,小白也没烦恼,根据慕课网liuyubobobo老师的视频课学习整理视频课指路:慕课网 liuyubobobo老师 炫丽的倒计时效果Canvas绘图与动画基础

1、声明标签

  1. 宽高在标签上

    <canvas 
     id="canvas" 
     width="1024" 
     height="768"
     style="background-color: rgb(200,200,200);display: block;margin: 20px auto;"
    >
     当前浏览器不支持canvas,请更换浏览器后再试
    </canvas>
  2. 宽高在js中设置

    <canvas id="canvas" style="background-color: rgb(200,200,200);display: block;margin: 20px auto;">
     当前浏览器不支持canvas,请更换浏览器后再试
    </canvas>
    window.onload = function () {
     // 获取
     var canvas = document.getElementById('canvas')
     canvas.width = 1024
     canvas.height = 768
     // 判断该浏览器是否可以使用canvas
     if (canvas.getContext('2d')) {
       // 使用2d绘图
       var context = canvas.getContext('2d')
       // 使用context绘制
     } else {
       alert('当前浏览器不支持canvas,请更换浏览器后再试')
     }
    }

2、画一条直线

  1. canvas先设置状态最后绘制canvas基础1 - 画直线(通俗易懂)
  2. 画一条直线js代码

    context.moveTo(x, y) 起点 context.lineTo(x, y) 终点 context.lineWidth = 5 线宽 context.strokeStyle = '#005588' 线样式 context.stroke() 绘制

    window.onload = function () {
     var canvas = document.getElementById('canvas')
     canvas.width = 1024
     canvas.height = 768
     if (canvas.getContext('2d')) {
       var context = canvas.getContext('2d')
       // 使用context绘制
       // 从坐标(100,100)为起点开始
       context.moveTo(100, 100)
       // 到坐标(700,700)为终点画一条直线
       context.lineTo(700, 700)
       // 线宽为5
       context.lineWidth = 5
       // 线的样式颜色
       context.strokeStyle = '#005588'
       // 执行划直线这个操作
       context.stroke()
     } else {
       alert('当前浏览器不支持canvas,请更换浏览器后再试')
     }
    }

    效果canvas基础1 - 画直线(通俗易懂)

    3、线条组成的图形 - 画一个三角形

    window.onload = function () {
     var canvas = document.getElementById('canvas')
     canvas.width = 1024
     canvas.height = 768
     if (canvas.getContext('2d')) {
       var context = canvas.getContext('2d')
       // 使用context绘制
       // 从坐标(100,100)为起点开始
       context.moveTo(100, 100)
       context.lineTo(700, 700)
       context.lineTo(100, 700)
       context.lineTo(100, 100)
       // 线宽为5
       context.lineWidth = 5
       // 线的样式颜色
       context.strokeStyle = '#005588'
       // 执行划直线这个操作
       context.stroke()
     } else {
       alert('当前浏览器不支持canvas,请更换浏览器后再试')
     }
    }

    canvas基础1 - 画直线(通俗易懂)

    4、多边形填充加描边

  • context.fillStyle = 'rgb(2,100,30)' 填充的颜色
  • context.fill() 填充

    window.onload = function () {
     var canvas = document.getElementById('canvas')
     canvas.width = 1024
     canvas.height = 768
     if (canvas.getContext('2d')) {
       var context = canvas.getContext('2d')
       // 使用context绘制
       // 从坐标(100,100)为起点开始
       context.moveTo(100, 100)
       // 到坐标(700,700)为终点画一条直线
       context.lineTo(700, 700)
       context.lineTo(100, 700)
       context.lineTo(100, 100)
       // 线宽为5
       context.lineWidth = 5
       // 线的样式颜色
       context.strokeStyle = '#f00'
       // 执行划直线这个操作
       context.stroke()
     
       // 多边形填充
       context.fillStyle = 'rgb(2,100,30)'
       context.fill()
     } else {
       alert('当前浏览器不支持canvas,请更换浏览器后再试')
     }
    }

    canvas基础1 - 画直线(通俗易懂)

    5、定义两个形状

  • context.beginPath() 起始
  • context.closePath() 结束
  • 这两个方法将两段路径包裹起来将其与其它路径分隔开

    window.onload = function () {
    var canvas = document.getElementById('canvas')
     canvas.width = 1024
     canvas.height = 768
     if (canvas.getContext('2d')) {
       var context = canvas.getContext('2d')
       // 使用context绘制
       // 从坐标(100,100)为起点开始
       context.beginPath()
       context.moveTo(100, 100)
       // 到坐标(700,700)为终点画一条直线
       context.lineTo(700, 700)
       context.lineTo(100, 700)
       context.lineTo(100, 100)
       context.closePath()
       // 线宽为5
       context.lineWidth = 5
       // 线的样式颜色
       context.strokeStyle = '#f00'
       // 执行划直线这个操作
       context.stroke()
     
       // // 多边形填充
       // context.fillStyle = 'rgb(2,100,30)'
       // context.fill()
       context.beginPath()
       context.moveTo(200, 100)
       context.lineTo(700, 600)
       context.closePath()
       context.strokeStyle = '#000'
       context.stroke()
     
     } else {
       alert('当前浏览器不支持canvas,请更换浏览器后再试')
     }
    }

    canvas基础1 - 画直线(通俗易懂)

    6、七巧板demo例子

  • html部分

    <canvas id="canvas" width="800" height="800" style="background-color: aliceblue;display: block;margin: 10px auto;">
     当前浏览器不支持canvas,请更换浏览器后再试
    </canvas>
  • 自造数据部分

    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: '#67becf'
     }, {
         p: [{x: 0,y: 800},{x: 400,y: 400},{x: 400,y: 800},],
        color: '#f50'
     }, {
         p: [{x: 400,y: 800}, {x: 800,y: 800}, {x: 400,y: 400}, ],
         color: '#0f5'
     }, {
         p: [{x: 400,y: 400}, {x: 800,y: 0}, {x: 600,y: 600}, ],
         color: '#25f'
     }, {
         p: [{x: 800,y: 0}, {x: 600,y: 600}, {x: 800,y: 800}, ],
         color: '#f33'
     }, 
    ]
  • js部分

    let canvas = document.getElementById('canvas')
     if (canvas.getContext('2d')) {
       var context = canvas.getContext('2d')
       tangram.forEach((item, index) => {
         draw(item, context)
       })
     }
     
     function draw(piece, cxt) {
       cxt.beginPath()
       cxt.moveTo(piece.p[0].x, piece.p[0].y)
       piece.p.forEach((item, index) => {
         cxt.lineTo(item.x, item.y)
       })
       cxt.closePath()
     
       cxt.fillStyle = piece.color
       cxt.fill()
       cxt.lineWidth = 2
       cxt.strokeStyle = '#000'
       cxt.stroke()
    }

    7、绘制正方形demo

    <canvas id="canvas" width="1024" height="768" style="display: block;
    background-color: #eee;margin: 10px auto;">
     不能使用
    canvas
    </canvas>
    <script>
     var canvas = document.getElementById('canvas')
     var context = canvas.getContext('2d')
     drawRect(context, 100, 100, 400, 400, 10, '#600', '#008833')
     
     function drawRect(cxt, x, y, width, height, borderWidth, borderColor, borderFill) {
       cxt.beginPath()
       cxt.moveTo(x, y)
       cxt.lineTo(x + width, y)
       cxt.lineTo(x + width, y + height)
       cxt.lineTo(x + width, y + height)
       cxt.lineTo(x, y + height)
       cxt.closePath()
     
       cxt.lineWidth = borderWidth
       cxt.strokeStyle = borderColor
       cxt.fillStyle = borderFill
     
       cxt.fill()
       cxt.stroke()
     }
    </script>

总结

本文问canvas第一节,之后会持续更新,大家感觉还实用的话,关注或者点个赞都可以,谢谢啦