canvas中的rotate的使用方法

2022-09-07 10:57:09 字數 1373 閱讀 7654

今天在繪製乙個足球滾動的時候,想使用rotate方法,之前看到這個方法的時候,並沒有引起任何重視,無非就是和css3裡的rotate一樣的用麼...

遺憾的是,事實並非如此,由於**在公司,我也就不去找那些資源了,直接用乙個黑色方塊代替

**如下:

var ocan = document.getelementbyid("canvas");


var ctx = ocan.getcontext("2d");


ctx.rotate(30 * math.pi / 180);


ctx.fillrect(50,50,100,100);
顯示結果如下:

這...不能忍....於是乎開啟了我心愛的w3school,發現一句有用的也沒多說(心寒)

下班後一路琢磨這個問題,終於想到,translate似乎可以改變座標系的0,0點.

var x      = 10;


var y      = 10;


var width  = 100;


var height = 100


var cx     = x + 0.5 * width;   //


x of shape center


var cy     = y + 0.5 * height;  //


y of shape center


context.fillstyle = "#ff0000";


context.fillrect(x, y, width, height);  


//draw normal shape


context.translate(cx, cy);              


//translate to center of shape


context.rotate( (math.pi / 180) * 25);  //


rotate 25 degrees.


context.translate(-cx, -cy);            //


translate center back to 0,0


context.fillstyle = "#0000ff";


context.fillrect(x, y, width, height);
這次,恍然大悟,正解!封裝下吧,以後就用它了

function


fillrotaterect(context,x,y,width,height,degrees)
但這個方法只能繪製正方形,遇到,或者圓形,就又得改動,有時間了再思考怎麼封裝乙個比較妥善的吧.先到這裡了

Rails的log的rotate問題

忘了是在哪個傢伙的blog上copy了一段 config.logger logger.new log log.daily 貌似看起來很對，但是結果是出現了production.2008 02 28.20080228這種東西 幾經周折，才發現對rails的log的rotate原理沒搞清楚 rails的...

canvas中的漸變

createlineargradient x1,y1,x2,y2 表示漸變的起點 x1,y1 與終點 x2,y2 gradient.addcolorstop position,color gradient createlineargradient的返回值 addcolorstop 方法接受 2 個引...

canvas繪製中的API

canvas繪製z 先貼 吧 1 2 created by administrator on 2016 1 26.3 4vari 5 function draw id 11function painting view code 這裡值得一提的是setinterval方法。格式 setinterval...