假设我有一个像这样的简单 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 元素中分别定义了两个形状。单击时，我希望能够让这两个元素作为一个元素移动(就好像它是一个上面有星星的球一样)。我看到 Canvas 支持 transform。这是让 Canvas 元素通过点击移动的最佳方式吗？
最佳答案
@Blindman67 的想法是正确的:同时画圆和星——这样就形成了一个组。
您的代码中唯一的问题是您对星坐标进行了硬编码。要使用硬编码坐标，您可以“规范化”星坐标，使星以 [0,0] 为中心。 context.translate(x,y) 方法会将 Canvas 原点 [0,0] 移动到 x,y —— 有效地将星星的中心点移动到 Canvas [0,0]。如果您想学习如何使用相对坐标(而不是硬编码坐标)绘制星星，请查看 this Q&A .
这是一个示例代码和一个演示，可以让您的小组围成一个圆圈
您可以在代码中使用 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>关于jquery - 如何在单击时转换分组的 Canvas 元素？，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/36670872/