HTML5 Canvas图像旋转 [英] HTML5 Canvas Image Rotation

问题描述

我有一个画布，我已经绘制了一系列的图像，可以拖放到其中，每个图像是一个单独的实体。

I have a canvas where i have drawn a series of images onto it that can be dragged and dropped around, each image is a seperate entity.

我需要，根据图像被放下的位置旋转该图像，以使其看起来适当，成像拖动围绕圆的三角形，基线需要总是指向外部。

I need to, depending on where the image is dropped rotate that image so that it looks appropiate, imaging dragging a triangle around a circle, the base line needs to always point outwards.

I认为我将能够旋转图像，然后在画布上绘制，但我在互联网上搜索时似乎找到的是画布旋转每次 - 是可能的旋转图像，然后将其放置在画布？

I thought i would be able to rotate the image and then draw that on the canvas, but what i seem to find when searching on the internet is that the canvas rotates each time - is it possible to rotate the image only and then place it on the canvas?

很感谢！

推荐答案

画布，创建一个缓冲区画布，将图像放在那里，旋转，然后移植到主画布。

Before placing the image on the canvas, create a buffer canvas, place image there, rotate it and then port to main canvas.

var canvas = document.getElementById('test_canvas');
var ctx = canvas.getContext('2d');

var buffer = document.createElement('canvas');
buffer.width = buffer.height = 60;
var bctx = buffer.getContext('2d');
bctx.translate(30, 30);
bctx.rotate(0.5);
bctx.fillStyle = 'rgb(255, 0, 0)';
bctx.fillRect(-15, -15, 30, 30);

ctx.fillStyle = 'rgb(0, 255, 0)';
ctx.fillRect(30, 30, 30, 30);
ctx.drawImage(buffer, 50, 50);

您可以在JSFiddle检查此代码我已设置 - http://jsfiddle.net/dzenkovich/UdaUA/2/

You can check this code at JSFiddle I've setup - http://jsfiddle.net/dzenkovich/UdaUA/2/

注意，你需要密切关注旋转点和缓冲区画布的大小，这是工作。
更多信息请查看这篇文章我发现 http://creativejs.com/2012/01/day-10-drawing-rotated-images-into-canvas/

Note you'll need to keep a close eye at the rotation point and buffer canvas size for this to work. For more info check out this article I've found http://creativejs.com/2012/01/day-10-drawing-rotated-images-into-canvas/

这篇关于HTML5 Canvas图像旋转的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！