javascript - 按下左右箭头键时如何在 HTML5 Canvas 上旋转图像-6ren

javascript - 按下左右箭头键时如何在 HTML5 Canvas 上旋转图像

转载作者：行者123 更新时间：2023-11-30 16:34:33

我需要帮助来尝试旋转我在 Canvas 上绘制的矩形。一旦我按下键盘上的箭头键，我希望矩形的顶部向右或向左旋转。到目前为止，这是我的代码:

HTML:

  <body >
    <div id="canvas-container">
      <canvas id="canvas" width="500" height="400"></canvas>
    </div>
  </body>

CSS:

canvas {
   display: inline;
}

Javascript:

document.addEventListener("DOMContentLoaded", function() {
    drawBorder();
});

var canvas;
var context;
var size;

drawRectangle();
drawHalfCircle();

function drawBorder() {
    canvas = document.getElementById("canvas");
    context = canvas.getContext('2d');
    size = {
        x: canvas.width,
        y: canvas.height
    };
    //have to set colors etc befor it is drawn
    context.strokeStyle = 'black';
    //takes 4 parameters
    context.strokeRect(0, 0, size.x, size.y);
}

function drawRectangle() {
    var c = document.getElementById("canvas");
    var ctx = c.getContext("2d");
    ctx.rect(246, 290, 8, 80);
    ctx.stroke();
}

function drawHalfCircle(){
    var c= document.getElementById("canvas");
    var ctx=c.getContext("2d");
    ctx.beginPath();
    ctx.arc(250,579,308,1.2*Math.PI, 1.8*Math.PI);
    ctx.stroke();
}

最佳答案

我已经按照您想要的正确路线模拟了一些东西。

document.addEventListener("DOMContentLoaded", function() {
    drawBorder();
});

var canvas = document.getElementById("canvas");
var context = canvas.getContext('2d');
var size;
var angle = 0;

setInterval(function () {
    context.save(); 
    context.clearRect(0, 0, canvas.width, canvas.height); 

    drawBorder();
    drawHalfCircle();
    drawRectangle();

    context.restore(); 
 }, 100);

function drawBorder() {
    size = {
        x: canvas.width,
        y: canvas.height
    };

    //have to set colors etc befor it is drawn
    context.strokeStyle = 'black';
    //takes 4 parameters
    context.strokeRect(0, 0, size.x, size.y);
}

function drawRectangle() {
    context.rotate(Math.PI / 180 * (angle));
    context.rect(246, 290, 8, 80);
    context.stroke();
}

function drawHalfCircle(){
    context.beginPath();
    context.arc(250,579,308,1.2*Math.PI, 1.8*Math.PI);
    context.stroke();
}

document.onkeydown = function(e) {
    var event = window.event ? window.event : e;

    if (e.keyCode == '37') {
       angle += 5;
    }
    else if (e.keyCode == '39') {
       angle -= 5;
    }
}

基本上设置一个间隔并重绘(即像电影中的帧)并通过变量旋转。

在此处查看演示 https://jsbin.com/qititacazu/edit?js,output

如果你想翻译它，让它围绕不同的点旋转，做这样的事情。

context.translate(246, 290); 
context.rotate(Math.PI / 180 * (angle));
context.rect(-4, 0, 4, 80);

关于javascript - 按下左右箭头键时如何在 HTML5 Canvas 上旋转图像，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/32880443/

文章推荐： c - gcc 升级后找不到 stddef.h

文章推荐： c - 对单个指针参数应用限制是否有用？

文章推荐： c# - WCF 缓存解决方案 - 需要建议

行者123

个人简介

我是一名优秀的程序员,十分优秀！

作者热门文章

滴滴打车优惠券免费领取

全站热门文章

首页

博学

6Ren·AI

商城

javascript - 按下左右箭头键时如何在 HTML5 Canvas 上旋转图像