画布基本教程
唠唠叨叨
canvas 是 HTML5 新增的元素,可用于通过使用JavaScript中的脚本来绘制图形。例如,它可以用于绘制图形,制作照片,创建动画,甚至可以进行实时视频处理或渲染。
HTML结构
<style>
canvas {
border: 1px solid #000;
}
</style>
<canvas width="600" height="600"></canvas>
绘制网格线
绘制个普通网格线即可(想展示强大的画工也可以绘制个蜘蛛网出来)
// 获取画布,渲染上下文,绘制工具箱
let myCan = document.querySelector('canvas')
let cxt = myCan.getContext('2d')
// 设置网格的大小
let gridSize = 10
// 获取画布的宽高
let w = cxt.canvas.width
let h = cxt.canvas.height
// 计算出每一行能放多少网格线
let lineTotalX = Math.floor(w / gridSize)
let lineTotalY = Math.floor(h / gridSize)
// 先将X轴的线画出来(记得要去掉1px的不饱和填充)
for (var i = 0; i < lineTotalX;i++){
cxt.moveTo(i*gridSize - 0.5,0)
cxt.lineTo(i*gridSize - 0.5,h)
cxt.strokeStyle = '#eee'
cxt.stroke()
}
for (var i = 0; i < lineTotalY;i++){
cxt.moveTo(0,i*gridSize - 0.5)
cxt.lineTo(w,i*gridSize - 0.5)
cxt.strokeStyle = '#eee'
cxt.stroke()
}
绘制坐标
新建一个html文件,重新绘制
let myCan = document.querySelector('canvas')
let cxt = myCan.getContext('2d')
// 获取画布的宽高
let w = cxt.canvas.width
let h = cxt.canvas.height
// 设置坐标系原点的空间
let space = 20
// 初始化三角形的长度(高)
let arrowSize = 10
// 设置原点坐标x,y
let x = space
let y = h - space
// 绘制X轴
cxt.beginPath()
cxt.moveTo(x,y)
cxt.lineTo(w - space,y)
// 绘制三角形
cxt.lineTo(w - space - arrowSize,y + arrowSize/2)
cxt.lineTo(w - space - arrowSize,y - arrowSize/2)
cxt.lineTo(w - space,y)
cxt.fill()
cxt.stroke()
// 绘制y轴
cxt.beginPath()
cxt.moveTo(x,y)
cxt.lineTo(x,space)
// 绘制三角形
cxt.lineTo(x-arrowSize/2,space+arrowSize)
cxt.lineTo(x+arrowSize/2,space+arrowSize)
cxt.lineTo(x,space)
cxt.fill()
cxt.stroke()
绘制点
var myCan = document.querySelector('canvas')
var cxt = myCan.getContext('2d')
let coordinate = {
x:100,
y:100
}
// 绘制一个大小为10的正方形
let dottedSize = 10
cxt.beginPath()
cxt.moveTo(coordinate.x - dottedSize/2,coordinate.y - dottedSize/2)
cxt.