JavaScriptキャンバスで少し遊ぶタスクがあります。映画と一緒に青いブロックをオンクリックして回転させる必要があります。フィドルでわかるように、それは機能しますが、問題はフィルムの下にある私の名前です-回転するべきではなく、キャンバスの下部の位置に留まる必要があります（クリックする前に、本来あるべき場所にあります）。これはフィドルです（映画はありませんが、問題があります）：https：//jsfiddle.net/463h8se7/
そしてこれは私のJavaScriptです（これもフィドルにありますが、ここでも明確にするためです）：
var video;
var canvas;
var ctx;
var click = 0;
function animate() {
ctx.clearRect(0, 0, canvas.width, canvas.height);
printName();
ctx.save();
ctx.fillStyle = "#558899";
ctx.fillRect(canvas.width / 4 - 5, canvas.height / 4 - 5, canvas.width / 2 + 10, canvas.height / 2 + 10);
ctx.drawImage(video, canvas.width / 4, canvas.height / 4, canvas.width / 2, canvas.height / 2);
requestAnimationFrame(animate);
}
function rotate() {
if (click == 0) {
click = 1;
i = window.setInterval(function () {
ctx.translate(canvas.width / 2, canvas.height / 2);
ctx.rotate(2 * Math.PI / 180);
ctx.translate(-canvas.width / 2, -canvas.height / 2);
}, 20);
} else {
click = 0;
window.clearInterval(i);
}
}
function printName() {
ctx.fillStyle = "black";
ctx.font = "15px Arial";
ctx.fillText("aceimnors", canvas.width / 3, canvas.height - 1);
}
function load() {
video = document.getElementById("video");
canvas = document.getElementById("canvas");
ctx = canvas.getContext('2d');
animate();
}<div id="div_canvas">
<canvas id="canvas" onclick="rotate()"></canvas>
<p>canvas</p>
</div>animateあなたはすでにすべてを再描画しているので、私はそれを入れるだけですrequestAnimationFrame。
angle変数を保持し、後ろに回転することを忘れないでください。
var video = document.body.appendChild(document.createElement("img"));
video.id = "video";
video.addEventListener("load", load);
video.style.display = "none";
video.src = "https://www.w3schools.com/tags/img_girl.jpg";
var canvas = document.body.appendChild(document.createElement("canvas"));
canvas.id = "canvas";
var ctx = canvas.getContext("2d");
var click = false;
var angle = 0;
var angleTarget = 0;
canvas.addEventListener("click", function () { return angleTarget += .1; });
function animate() {
//Compund Angle
if (angle < angleTarget) {
angle += 0.01;
}
if (angle > angleTarget) {
angle = angleTarget;
}
//Clear
ctx.clearRect(0, 0, canvas.width, canvas.height);
//Text
printName();
//Rotate
ctx.translate(canvas.width / 2, canvas.height / 2);
ctx.rotate(angle * (Math.PI * 2));
ctx.translate(-canvas.width / 2, -canvas.height / 2);
//Draw Graphic
ctx.fillStyle = "#558899";
ctx.fillRect(canvas.width / 4 - 5, canvas.height / 4 - 5, canvas.width / 2 + 10, canvas.height / 2 + 10);
ctx.drawImage(video, canvas.width / 4, canvas.height / 4, canvas.width / 2, canvas.height / 2);
requestAnimationFrame(animate);
//Rotate back
ctx.translate(canvas.width / 2, canvas.height / 2);
ctx.rotate(-angle * (Math.PI * 2));
ctx.translate(-canvas.width / 2, -canvas.height / 2);
}
function printName() {
ctx.fillStyle = "black";
ctx.font = "15px Arial";
ctx.fillText("aceimnors", canvas.width / 3, canvas.height - 1);
}
function load() {
video = document.getElementById("video");
canvas = document.getElementById("canvas");
ctx = canvas.getContext('2d');
animate();
}この記事はインターネットから収集されたものであり、転載の際にはソースを示してください。
侵害の場合は、連絡してください[email protected]
コメントを追加