canvas基础1 - 画直线（通俗易懂）

站长

2022年09月08日 22:24 · 阅读数 40

系列文章目录

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

1、声明标签

宽高在标签上

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

宽高在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、画一条直线

canvas先设置状态最后绘制

画一条直线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第一节，之后会持续更新，大家感觉还实用的话，关注或者点个赞都可以，谢谢啦