如何解决在画布上绘制和旋转多个图像
我想在画布上绘制四个图像,如下所示。
但是,我只想使用一张图像,而不是四张。
(仅使用img0,不使用img90 / img180 / img270)
换句话说,我想在画布上用一张图像(img0)绘制四个旋转方向不同的图像。
有可能吗?
var ctx = document.getElementById('canvas').getContext('2d')
var img0 = new Image()
img0.src = 'https://i.stack.imgur.com/0vxxK.png'
img0.addEventListener('load',function() {
ctx.drawImage(img0,0)
},false);
var img90 = new Image()
img90.src = 'https://i.stack.imgur.com/9EgLn.png'
img90.addEventListener('load',function() {
ctx.drawImage(img90,20,false);
var img180 = new Image()
img180.src = 'https://i.stack.imgur.com/Us9fa.png'
img180.addEventListener('load',function() {
ctx.drawImage(img180,40,false);
var img270 = new Image()
img270.src = "https://i.stack.imgur.com/EO9f9.png"
img270.addEventListener('load',function() {
ctx.drawImage(img270,60,false);
<canvas id="canvas" width="150" height="150"></canvas>
解决方法
有可能。您可以使用ctx.rotate("degrees" * Math.PI / 180);
函数。将"degrees"
替换为您要旋转图像的数量。
版权声明:本文内容由互联网用户自发贡献,该文观点与技术仅代表作者本人。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容, 请发送邮件至 dio@foxmail.com 举报,一经查实,本站将立刻删除。