How to rotate an image on HTML5 canvas when the ri

2019-08-12 01:17发布

站内文章 / JavaScript
14 0 0

问题:

I need help trying to rotate the rectangle that I have drawn on the canvas. I would like the top of the rectangle to pivot either to the right or left once I press on the arrow keys on my keyboard. This is my code so far:

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();
}

回答1:

I have mocked something up is this along the correct lines of what you are wanting.

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;
    }
}

Basically set an interval and redraw (ie frames like in a movie) and rotate via a variable.

See a demo here https://jsbin.com/qititacazu/edit?js,output

If you want to translate it so it will rotate around a different point do something like this.

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


标签： javascript html5-canvas
举报

收藏的人(0)

Ta的文章 更多文章
登录 后发表评论
0条评论
还没有人评论过~