假设我有一个简单的canvas元素，例如：HTML：
function oval(context, x, y, w, h)
{
context.save();
context.beginPath();
context.translate(x, y);
context.scale(w/2, h/2);
context.arc(1, 1, 1, 0, 2*Math.PI, false);
context.closePath();
context.restore();
}
function drawCanvas(canvasId)
{
//// General Declarations
var canvas = document.getElementById(canvasId);
var context = canvas.getContext('2d');
//// Color Declarations
var blackColor = 'rgba(0, 0, 0, 1)';
var color = 'rgba(0, 109, 73, 1)';
var color2 = 'rgba(255, 255, 87, 1)';
//// Group
//// Oval Drawing
oval(context, 76.5, 64.5, 47, 47);
context.fillStyle = color;
context.fill();
context.strokeStyle = blackColor;
context.lineWidth = 1;
context.stroke();
//// Star Drawing
context.beginPath();
context.moveTo(100, 74.5);
context.lineTo(104.76, 81.45);
context.lineTo(112.84, 83.83);
context.lineTo(107.7, 90.5);
context.lineTo(107.94, 98.92);
context.lineTo(100, 96.1);
context.lineTo(92.06, 98.92);
context.lineTo(92.3, 90.5);
context.lineTo(87.16, 83.83);
context.lineTo(95.24, 81.45);
context.closePath();
context.fillStyle = color2;
context.fill();
context.strokeStyle = blackColor;
context.lineWidth = 1;
context.stroke();
}<!DOCTYPE HTML>
<html>
<head>
<meta charset="utf-8">
<script type="text/javascript" src="scripts/canvas.js"></script>
<script>
window.onload = function()
{
drawCanvas('mainCanvas');
};
</script>
</head>
<body style="margin: 0px;">
<canvas id="mainCanvas" width="300" height="200"></canvas>
</body>
</html>此时，我在canvas元素中分别定义了两个形状。我希望能够在单击时使两个项目作为一个对象移动（就好像它是一个带有星星的球一样）。我看到transform画布支持。那是使画布元素从单击中移动的最佳方法吗？
@ Blindman67有一个正确的想法：同时绘制圆形和星形-从而创建一个组。
代码中唯一的麻烦是您已经硬编码了星形坐标。要使用硬编码的坐标，可以“标准化”星形坐标，以使星形居中于[0,0]。该context.translate(x,y)方法会将画布原点[0,0]移至x，y-有效地将星星的中心点移至画布[0,0]。如果您想学习如何使用相对坐标（而不是硬编码坐标）绘制星星，请参阅此问答。
这是示例代码和演示，可以使您的小组动起来
您可以使用drawGroup代码中的函数在任意x，y处绘制组
//// General Declarations
var canvas=document.getElementById("canvas");
var context = canvas.getContext('2d');
var cw=canvas.width;
var ch=canvas.height;
//// Color Declarations
var blackColor = 'rgba(0, 0, 0, 1)';
var color = 'rgba(0, 109, 73, 1)';
var color2 = 'rgba(255, 255, 87, 1)';
//
var centerX=150;
var centerY=150;
var radius=20;
var animationRadius=50;
var animationAngle=0;
requestAnimationFrame(animate);
function animate(time){
var x=centerX+animationRadius*Math.cos(animationAngle);
var y=centerY+animationRadius*Math.sin(animationAngle);
context.clearRect(0,0,canvas.width,canvas.height);
drawGroup(x,y,radius);
animationAngle+=Math.PI/60;
requestAnimationFrame(animate);
}
function drawGroup(centerX,centerY,radius){
// Oval
oval(centerX,centerY,radius);
context.fillStyle = color;
context.fill();
context.strokeStyle = blackColor;
context.lineWidth = 1;
context.stroke();
// star
star(centerX,centerY,radius);
context.fillStyle = color2;
context.fill();
context.strokeStyle = blackColor;
context.lineWidth = 1;
context.stroke();
}
function oval(x,y,r){
context.beginPath();
context.arc(x,y,r,0,2*Math.PI);
context.closePath();
}
function star(x,y,r){
var w=112.84-87.16;
var h=98.92-74.5;
// normalize fixed star coordinates by moving
// the center of the star to [0,0] with context.translate
context.translate(-87.16-w/2,-74.5-h/2);
// now move to x,y
context.translate(x,y);
// draw the star
context.beginPath();
context.moveTo(100, 74.5);
context.lineTo(104.76, 81.45);
context.lineTo(112.84, 83.83);
context.lineTo(107.7, 90.5);
context.lineTo(107.94, 98.92);
context.lineTo(100, 96.1);
context.lineTo(92.06, 98.92);
context.lineTo(92.3, 90.5);
context.lineTo(87.16, 83.83);
context.lineTo(95.24, 81.45);
context.closePath();
// always clean up, reverse the translate
context.setTransform(1,0,0,1,0,0);
}body{ background-color: ivory; }
#canvas{border:1px solid red; margin:0 auto; }<canvas id="canvas" width=300 height=300></canvas>本文收集自互联网，转载请注明来源。
如有侵权，请联系[email protected] 删除。
我来说两句