1.绘制图片
绘制图片需要用的ctx.drawImage()
参数一:图片对象
参数二,三:可选,图片裁剪的基点(原图左上角为原点)
参数四,五:可选,图片裁剪区域的大小(基于原图大小)
参数六,七:画布的绘制起点坐标
参数八,九:可选,被裁剪图片显示出来的大小(缩放)
注意:参数2-5都是可选的,用来剪切图片。不传的话就是显示整张图片
注意:参数8-9表示被裁剪图片显示出来的大小,采用的是缩放形式,默认为原图大小
注意:如果参数2-5以及传值,参数8-9就不能省略,不然会报错
注意:图片的加载是异步的,所以绘制的图片的时候要在图加载完成后执行
绘制完整的原图
<script>
var canvas = document.querySelector("canvas")
var ctx = canvas.getContext("2d")
//创建图片对象
var image = new Image()
//将图片加载到内存中
image.src = "xbx.jpeg"
//监听图片加载是否完成
image.onload = function(){
//图片已完成加载
ctx.drawImage(image,100,100)
}
</script>
缩放原图(一半大小)
ctx.drawImage(image,100,100,160,90)
剪切图片
//截去了左边的80px
ctx.drawImage(image,80,0,240,180,100,100,240,180)
2.绘制帧动画
步骤:
步骤一:加载一张精灵图
步骤二:绘制时对原图进行裁剪,可达到显示不同图片的效果
步骤三:监听键盘按键事件,根据不同的按键切换绘制的图片帧
步骤四:切换图片帧(利用ctx.clearRect()清除旧的图片,再绘制新的图片)
没有精灵图,无法演示。
转换
转换的方法有translate()/scale()/rotate()
调用他们来转换画布时会导致整个画布内的元素都会受影响,包括坐标系,直线宽度,字体大小等等
1.偏移 translate()
使用translate()后坐标原点也会跟着偏移
<script>
var canvas = document.querySelector("canvas")
var ctx = canvas.getContext("2d")
//原点偏移
ctx.translate(50,50)
ctx.font = "20px 微软雅黑";
ctx.textBaseline = "top"
ctx.fillText("本来我在左上角",0,0)
</script>
2.缩放 scale()
使用scale()后整个画布都缩放了
<script>
var canvas = document.querySelector("canvas")
var ctx = canvas.getContext("2d")
//原点偏移
ctx.scale(0.5,0.5)
ctx.font = "40px 微软雅黑";
ctx.textBaseline = "top"
ctx.fillText("本来我在100*100的位置",100,100)
</script>
3.旋转 rotate()
rotate():单位 Math.PI
实例:将画布顺时针旋转45度
<script>
var canvas = document.querySelector("canvas")
var ctx = canvas.getContext("2d")
//原点偏移
ctx.rotate(Math.PI/4)
ctx.font = "20px 微软雅黑";
ctx.textBaseline = "top"
ctx.fillText("本来我在100*100的位置",0,0)
</script>