js-canvas(基本用法)
###1. canvas(画布)
<canvas>是HTML 5 新增的元素,可用于通过使用JavaScript中的脚本来绘制图形
默认宽高为300px*150px
基本概念和方法入门推荐: https://developer.mozilla.org/zh-CN/docs/Web/API/Canvas_API/Tutorial
###2.渲染上下文
<canvas>元素只是创造了一个固定大小的画布,要想在它上面绘制内容,我们需要找到它的渲染上下文
<canvas>元素有一个getContex()方法,这个方法是用来获取渲染上下文和它的绘画功能
基本用法:
<canvas id=”cav” width=”300px” height=”150px”></canvas>
var canvas = document.querySelector(“#cav”)
if(canvas.getContext){ // 必须判断是否存在该方法,即判断浏览器是否支持canvas
var ctx = canvas.getContext(“2d”);
}
###3. .画布api
oc.getContext(“2d”);
oc.width
oc.height
###4.上下文api
ctx.fillRect(x,y,w,h):填充矩形
ctx.strokeRect(x,ymwmh):带边框的矩形
ctx.clearRect(0,0,oc.width,oc.height):清除整个画布
注意原点的位置
ctx.fillStyle
ctx.strokeStyle
ctx.lineWidth
ctx.lineCap
ctx.lineJoin
ctx.moveTo(x,y):将画笔抬起点到x,y处
ctx.lineTo(x,y):将画笔移到x,y处
ctx.rect(x,y,w,h)
ctx.arc(x,y,r,degS,degE,dir)
ctx.arcTo(x1,y1,x2,y2,r):2个坐标,一个半径
结合moveTo(x,y)方法使用,
x,y:起始点
x1,y1:控制点
x2,y2:结束点
ctx.quadraticCurveTo(x1,y1,x2,y2) 创建二次贝塞尔曲线
结合moveTo(x,y)方法使用,
x,y:起始点
x1,y1:控制点
x2,y2:结束点
必须经过起点和终点
ctx.bezierCurveTo(x1, y1, x2, y2, x3, y3) 创建三次方贝塞尔曲线
结合moveTo(x,y)方法使用,
x,y:起始点
x1,y1:控制点
x2,y2:控制点
x3,y3:结束点
必须经过起点和终点
ctx.fill()
ctx.stroke()
ctx.beginpath():清除路径容器
ctx.closepath():闭合路径
fill自动闭合
stroke需要手动闭合
ctx.save()
将画布当前状态(样式相关 变换相关)压入到样式栈中
ctx.restore()
将样式栈中栈顶的元素弹到样式容器中
图像最终渲染依赖于样式容器
ctx.translate(x,y):将原点按当前坐标轴位移x,y个单位
ctx.rotate(弧度):将坐标轴按顺时针方向进行旋转
ctx.scale(因子):
放大:放大画布,画布中的一个css像素所占据的物理面积变大,画布中包含的css像素的个数变少
画布中图像所包含的css像素的个数不变
缩小:缩小画布,画布中的一个css像素所占据的物理面积变小,画布中包含的css像素的个数变多
画布中图像所包含的css像素的个数不变
附加: canvas作品资源 https://www.html5tricks.com/tag/html5-canvas/