1. 标签 <canvas></canvas>
2.大小
可以在标签中直接写
<canvas id="canvas" width="500" height="300"></canvas>
也可以在Css中为id类添加样式
#canvas { background-color: red; width:520px; height:200px; }
也可以在JS中赋值
var canvas = document.querySelector('#canvas') canvas.width = window.innerWidth canvas.height = 300
默认大小 300 150 不推荐多种方式一起使用
3.线
var ctx = canvas.getContext('2d');
// 开始画线
ctx.beginPath()
// 移动到起点
ctx.moveTo(x,y) x,y 为坐标点
// 画线连接两个点
ctx.lineTo(x,y)fi
￥￥ // 这里也可以用 ctx.closePath() 闭合线段 或 ctx. fill() 填充闭合线段
// 绘制出定义的线
ctx.stroke()
4.矩形
//画一个矩形 起点坐标 x,y 宽 高
ctx.rect(0,0, 400,200)
// 接着可以 闭合填充矩形 也可以只是绘制出闭合的矩形 ctx.fill() ctx.stroke()
// 也可以将上面绘制和闭合 一起使用
ctx.fillRect(0,0,400,200) or ctx.strokeRect(0,0,400,200)
// 清除指定区域内的任何画笔痕迹
ctx.clearRect(0,0,200,200)
5.圆形
// 画一个矩形 x,y 圆心 r 半径 startAngle 开始角度 endAngle 结束角度 anticlockwise true 逆时针 false 顺时针 默认false
ctx.arc(x,y,r,startAngle,endAngle,anticlockwise)
6.文字
// 绘制文字 text 文字内容 x，y 坐标
ctx.fillText(text,x,y)
// 绘制文字 text 文字内容 x,y 坐标 和上面的区别 我用起来的感觉就是这个是加粗 具体的后面在看吧
ctx.strokeText(text,x,y)
// 字体 和CSS一样
ctx.font()
// 文本居中方式 left | right | center | start | end
ctx.textAlign()
// 基线对齐方式 top | hanging | middle | alphabetic | ideographic
ctx.textBaseline()
// 文字方向 ltr | rtl | inherit
ctx.direction
7.图片
var img = new Image()
// 图片地址
img.src = ''
// 绘制图片 img 图片对象 x,y 坐标 width 宽 height 高
ctx.drawImage(img,x,y,width,height)
$$ 这里我遇到了这样写图片不显示的问题 应该是显示时机的问题 改为如下写法即可显示
var myImage= new Image()
myImage.onLoad = ()=>{
ctx.drawIamge(myImage,x,y,width,height)
}
// 写图片地址
myImage.src = ''
8.样式
//填充颜色 我怎么没用处效果呢...
ctx.fillStyle('blue')
//填充颜色 我怎么没用处效果呢...
ctx.strokeStyle('blue')
9.状态
// 存储当前的值 颜色等
ctx.save()
// 恢复到存储的值
ctx.restore()
10.