我正在尝试动画,<canvas>并且无法确定如何以一定角度绘制图像.期望的效果是像往常一样绘制的一些图像,其中一个图像缓慢旋转.(如果这有任何区别,则此图像不在屏幕的中心).
如何使用画布html5元素从底部中心角度旋转图像？
<html>
<head>
<title>test</title>
<script type="text/javascript">
function startup() {
var canvas = document.getElementById('canvas');
var ctx = canvas.getContext('2d');
var img = new Image();
img.src = 'player.gif';
img.onload = function() {
ctx.translate(185, 185);
ctx.rotate(90 * Math.PI / 180);
ctx.drawImage(img, 0, 0, 64, 120);
}
}
</script>
</head>
<body onload='startup();'>
<canvas id="canvas" style="position: absolute; left: 300px; top: 300px;" width="800" height="800"></canvas>
</body>
</html>
不幸的是,这似乎是从图像的左上角旋转它.任何的想法？
编辑:最后,对象(太空飞船)必须像时钟指针一样旋转,就像它向右/向左转.
我正在尝试创建html5拼贴编辑器,您可以在其中编辑图像,类似于您在Word中看到的图像(裁剪图像而不是在拖动边缘时缩放图像,能够在自由变换区域内拖动/旋转/缩放图像(所以一种占位符功能)等).这意味着我们需要使用SVG和剪切/屏蔽,以及自由变换元素与那些掩码/剪辑的绑定位置.之后生成的整个SVG应该可以根据打印尺寸进行扩展(但这不是问题).
这个想法很简单 -
问题:即使转换后的SVG蒙版具有FT div的转换和位置的精确副本,当转换包含旋转时,它也会很奇怪.看起来像变换 - 原点不起作用,旋转和缩放以某种方式连接到左上角而不是中心,不知道为什么:/
这是一个小提琴,只是尝试旋转元素,你会看到问题是什么:
小提琴 (已经制作的svg的简化代码)
主要部分:
var refreshSVGMask = function(){
//get element transform
var elTransform = $('#ft').css("transform");
//quick parse of matrix transform:
var elMatrix = elTransform.substring(elTransform.indexOf("matrix") + 7, elTransform.indexOf(")"));
//modify matrix, to apply last two values (top and left position), which in jquery free transform are in "top" and "left" css attributes. Note - I've also tried applying same matrix, but changing "x" and "y" attributes in SVG (like: …有没有人javascript画布或java swing示例？
像这样的东西:http: //www.fmsinc.com/microsoftaccess/controls/components/gauges/gauge-half.gif
我该如何绘制"分隔符"线？
如果我有一些使用坐标数组定义的形状，例如
[[-30, -30], [-30, 30], [30, 30], [30, -30]]
和边缘定义使用：
[[0,1],[0,3],[1,2],[2,3]]
做一个正方形。
如何以编程方式告诉形状在javascript中以0-> 359的角度在中心旋转*？
*或者更好的是，是否有允许我选择旋转中心的功能？
** 目前，我已经设法使用以下方法将画布圈成圆形：
var x_rotate = Math.sin(angle * Math.PI /180);
var y_rotate = Math.cos(angle * Math.PI /180);
// for each coordinate
//add x_rotate and y_rotate if coordinate > 0 or subtract if coordinate < 0