图像的分辨率
- 图像的分辨率是800600 图片容器的大小是800px600px
<canvas id="canvas" width="800" height="600" style="width:800px; height:600px;"></canvas>
移动
<canvas id="canvas" width="800" height="600" ></canvas>
<script>
var canvas = document.querySelector('#canvas')
var cxt = canvas.getContext('2d')
// 移动即是translate，会将整个坐标尺进行移动
// 坐标尺移动前的内容是不会发生变化的
cxt.fillStyle = 'hotpink'
cxt.fillRect(0,0,100,100)
cxt.translate(300,0)
cxt.fillStyle = 'deepskyblue'
cxt.fillRect(100,100,300,100)
</script>
旋转45度
cxt.rotate(Math.PI/4) //旋转45度
缩放
cxt.scale(2,2) //x轴方向和y轴方向都放大一倍
保留画笔的状态
cxt.save() //保存之前的画笔状态
cxt.restore() //恢复之前的画笔状态
//如果有多个的话，那就按照先进后出的原则来恢复画笔的记录（先保存后恢复）
版权声明：本文内容由互联网用户自发贡献，该文观点仅代表作者本人。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容， 请发送邮件至 举报，一经查实，本站将立刻删除。
如需转载请保留出处：https://bianchenghao.cn/bian-cheng-ji-chu/97056.html