如何旋转在canvas中的形状，html5？ [英] how can i rotate a shape in canvas,html5?

问题描述

im尝试旋转此线

  window.onload = function（）{
 var canvas = document.getElementById（foo）; 
 var context = canvas.getContext（2d）; 
 
 context.moveTo（250，50）; 
 context.lineTo（250，250）; 
 context.stroke（）; 
 context.rotate（0.30）; 
 
}; 
  

我做错了什么？我想我错过了一些步骤。

> context.rotate（0.30）; //<<<设置当前转换为旋转
context.moveTo（250，50）;
context.lineTo（250，250）;
context.stroke（）;


im tried to rotate a line with this

window.onload= function(){
        var canvas=document.getElementById("foo");
        var context=canvas.getContext("2d");

        context.moveTo(250, 50);
        context.lineTo(250, 250);
        context.stroke();
        context.rotate(0.30);

    };

what am i doing wrong? i think im missing some steps. can anyone explain?

解决方案

Use this instead:

context.rotate(0.30); // <<< set current transformation to rotated
context.moveTo(250, 50);
context.lineTo(250, 250);
context.stroke();

这篇关于如何旋转在canvas中的形状，html5？的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！