HTML5 Canvas實(shí)現(xiàn)平移/放縮/旋轉(zhuǎn)deom示例(附截圖)
發(fā)布時(shí)間:2013-07-04 15:58:30 作者:佚名
我要評(píng)論

HTML5 Canvas中提供了實(shí)現(xiàn)圖形API,通過(guò)它可以簡(jiǎn)單的實(shí)現(xiàn)平移,旋轉(zhuǎn),放縮等等,下面與大家分享下平移,旋轉(zhuǎn),放縮的具體實(shí)現(xiàn)及參照?qǐng)D,感興趣的朋友可以參考下哈,希望對(duì)大家有所幫助
HTML5 Canvas中提供了實(shí)現(xiàn)圖形平移,旋轉(zhuǎn),放縮的API。
平移(translate)
平移坐標(biāo)translate(x, y)意思是把(0,0)坐標(biāo)平移到(x, y),原來(lái)的(0,0)坐標(biāo)則變成(-x, -y)
圖示如下:
任何原來(lái)的坐標(biāo)點(diǎn)p(ox, oy)在translate之后的坐標(biāo)點(diǎn)為p(ox-x, oy-y),其中點(diǎn)(x, y)為平移
點(diǎn)坐標(biāo)translate(x, y)。
代碼演示:
// translate is move the startpoint to centera and back to top left corner
function renderText(width, height, context) {
context.translate(width/ 2, height / 2); // 中心點(diǎn)坐標(biāo)為(0, 0)
context.font="18px Arial";
context.fillStyle="blue";
context.fillText("Please Press <Esc> to Exit Game",5,50);
context.translate(-width/2, -height/2); // 平移恢復(fù)(0,0)坐標(biāo)為左上角
context.fillText("I'm Back to Top",5,50);
}
放縮(Scale)
Scale(a, b)意思是將對(duì)象沿著XY軸分別放縮至a*x, b*y大小。效果如圖示:
// translation the rectangle.
function drawPath(context) {
context.translate(200,200);
context.scale(2,2);// Scale twice size of original shape
context.strokeStyle= "green";
context.beginPath();
context.moveTo(0,40);
context.lineTo(80,40);
context.lineTo(40,80);
context.closePath();
context.stroke();
}
旋轉(zhuǎn)(rotate)
旋轉(zhuǎn)角度rotate(Math.PI/8)
旋轉(zhuǎn)前的坐標(biāo)p(x, y)在對(duì)應(yīng)的旋轉(zhuǎn)后的坐標(biāo)P(rx, ry)為
Rx = x * cos(-angle) - y * sin(-angle);
Ry = y * cos(-angle) + x * sin(-angle);
旋轉(zhuǎn)90度可以簡(jiǎn)化為:
Rx = y;
Ry = -x;
Canvas中旋轉(zhuǎn)默認(rèn)的方向?yàn)轫槙r(shí)針?lè)较?。演示代碼如下:
// new point.x = x * cos(-angle) -y * sin(-angle),
// new point.y = y * cos(-angle) +x * sin(-angle)
function renderRotateText(context) {
context.font="24px Arial";
context.fillStyle="red";
context.fillText("i'm here!!!",5,50);
// rotate -90 degreee
// context.rotate(-Math.PI/2);
// context.fillStyle="blue";
// context.fillText("i'm here!!!", -400,30);
// rotate 90 degreee
context.rotate(Math.PI/2);
context.fillStyle="blue";
context.fillText("i'm here!!!",350,-420);
console.log(Math.sin(Math.PI/2));
// rotae 90 degree and draw 10 lines
context.fillStyle="green";
for(var i=0; i<4; i++) {
var x = (i+1)*20;
var y = (i+1)*60;
var newX = y;
var newY = -x;
context.fillRect(newX,newY, 200, 6);
}
}
通常做法是旋轉(zhuǎn)與平移一起使用,先將坐標(biāo)(0,0)平移到中心位置
translate (width/2, height/2)然后再使用rotate(Math.PI/2)完成旋轉(zhuǎn)
代碼示例如下:
function saveAndRestoreContext(context) {
context.save();
context.translate(200,200);
context.rotate(Math.PI/2);
context.fillStyle="black";
context.fillText("2D Context Rotate And Translate", 10, 10);
context.restore();
context.fillText("2D Context Rotate And Translate", 10, 10);
}
全部JavaScript代碼:
var tempContext = null; // global variable 2d context
window.onload = function() {
var canvas = document.getElementById("target");
canvas.width = 450;
canvas.height = 450;
if (!canvas.getContext) {
console.log("Canvas not supported. Please install a HTML5 compatible browser.");
return;
}
// get 2D context of canvas and draw image
tempContext = canvas.getContext("2d");
// renderText(canvas.width, canvas.height, tempContext);
saveAndRestoreContext(tempContext);
// drawPath(tempContext);
}
// translate is move the start point to centera and back to top left corner
function renderText(width, height, context) {
context.translate(width / 2, height / 2);
context.font="18px Arial";
context.fillStyle="blue";
context.fillText("Please Press <Esc> to Exit Game",5,50);
context.translate(-width / 2, -height / 2);
context.fillText("I'm Back to Top",5,50);
}
// translation the rectangle.
function drawPath(context) {
context.translate(200, 200);
context.scale(2,2); // Scale twice size of original shape
context.strokeStyle = "green";
context.beginPath();
context.moveTo(0, 40);
context.lineTo(80, 40);
context.lineTo(40, 80);
context.closePath();
context.stroke();
}
// new point.x = x * cos(-angle) - y * sin(-angle),
// new point.y = y * cos(-angle) + x * sin(-angle)
function renderRotateText(context) {
context.font="24px Arial";
context.fillStyle="red";
context.fillText("i'm here!!!",5,50);
// rotate -90 degreee
// context.rotate(-Math.PI/2);
// context.fillStyle="blue";
// context.fillText("i'm here!!!", -400,30);
// rotate 90 degreee
context.rotate(Math.PI/2);
context.fillStyle="blue";
context.fillText("i'm here!!!", 350,-420);
console.log(Math.sin(Math.PI/2));
// rotae 90 degree and draw 10 lines
context.fillStyle="green";
for(var i=0; i<4; i++) {
var x = (i+1)*20;
var y = (i+1)*60;
var newX = y;
var newY = -x;
context.fillRect(newX, newY, 200, 6);
}
}
function saveAndRestoreContext(context) {
context.save();
context.translate(200,200);
context.rotate(Math.PI/2);
context.fillStyle="black";
context.fillText("2D Context Rotate And Translate", 10, 10);
context.restore();
context.fillText("2D Context Rotate And Translate", 10, 10);
}
平移(translate)
平移坐標(biāo)translate(x, y)意思是把(0,0)坐標(biāo)平移到(x, y),原來(lái)的(0,0)坐標(biāo)則變成(-x, -y)
圖示如下:

任何原來(lái)的坐標(biāo)點(diǎn)p(ox, oy)在translate之后的坐標(biāo)點(diǎn)為p(ox-x, oy-y),其中點(diǎn)(x, y)為平移
點(diǎn)坐標(biāo)translate(x, y)。
代碼演示:
復(fù)制代碼
代碼如下:// translate is move the startpoint to centera and back to top left corner
function renderText(width, height, context) {
context.translate(width/ 2, height / 2); // 中心點(diǎn)坐標(biāo)為(0, 0)
context.font="18px Arial";
context.fillStyle="blue";
context.fillText("Please Press <Esc> to Exit Game",5,50);
context.translate(-width/2, -height/2); // 平移恢復(fù)(0,0)坐標(biāo)為左上角
context.fillText("I'm Back to Top",5,50);
}
放縮(Scale)
Scale(a, b)意思是將對(duì)象沿著XY軸分別放縮至a*x, b*y大小。效果如圖示:

復(fù)制代碼
代碼如下:// translation the rectangle.
function drawPath(context) {
context.translate(200,200);
context.scale(2,2);// Scale twice size of original shape
context.strokeStyle= "green";
context.beginPath();
context.moveTo(0,40);
context.lineTo(80,40);
context.lineTo(40,80);
context.closePath();
context.stroke();
}
旋轉(zhuǎn)(rotate)
旋轉(zhuǎn)角度rotate(Math.PI/8)

旋轉(zhuǎn)前的坐標(biāo)p(x, y)在對(duì)應(yīng)的旋轉(zhuǎn)后的坐標(biāo)P(rx, ry)為
Rx = x * cos(-angle) - y * sin(-angle);
Ry = y * cos(-angle) + x * sin(-angle);
旋轉(zhuǎn)90度可以簡(jiǎn)化為:
Rx = y;
Ry = -x;
Canvas中旋轉(zhuǎn)默認(rèn)的方向?yàn)轫槙r(shí)針?lè)较?。演示代碼如下:
復(fù)制代碼
代碼如下:// new point.x = x * cos(-angle) -y * sin(-angle),
// new point.y = y * cos(-angle) +x * sin(-angle)
function renderRotateText(context) {
context.font="24px Arial";
context.fillStyle="red";
context.fillText("i'm here!!!",5,50);
// rotate -90 degreee
// context.rotate(-Math.PI/2);
// context.fillStyle="blue";
// context.fillText("i'm here!!!", -400,30);
// rotate 90 degreee
context.rotate(Math.PI/2);
context.fillStyle="blue";
context.fillText("i'm here!!!",350,-420);
console.log(Math.sin(Math.PI/2));
// rotae 90 degree and draw 10 lines
context.fillStyle="green";
for(var i=0; i<4; i++) {
var x = (i+1)*20;
var y = (i+1)*60;
var newX = y;
var newY = -x;
context.fillRect(newX,newY, 200, 6);
}
}
通常做法是旋轉(zhuǎn)與平移一起使用,先將坐標(biāo)(0,0)平移到中心位置
translate (width/2, height/2)然后再使用rotate(Math.PI/2)完成旋轉(zhuǎn)
代碼示例如下:
復(fù)制代碼
代碼如下:function saveAndRestoreContext(context) {
context.save();
context.translate(200,200);
context.rotate(Math.PI/2);
context.fillStyle="black";
context.fillText("2D Context Rotate And Translate", 10, 10);
context.restore();
context.fillText("2D Context Rotate And Translate", 10, 10);
}
全部JavaScript代碼:
復(fù)制代碼
代碼如下:var tempContext = null; // global variable 2d context
window.onload = function() {
var canvas = document.getElementById("target");
canvas.width = 450;
canvas.height = 450;
if (!canvas.getContext) {
console.log("Canvas not supported. Please install a HTML5 compatible browser.");
return;
}
// get 2D context of canvas and draw image
tempContext = canvas.getContext("2d");
// renderText(canvas.width, canvas.height, tempContext);
saveAndRestoreContext(tempContext);
// drawPath(tempContext);
}
// translate is move the start point to centera and back to top left corner
function renderText(width, height, context) {
context.translate(width / 2, height / 2);
context.font="18px Arial";
context.fillStyle="blue";
context.fillText("Please Press <Esc> to Exit Game",5,50);
context.translate(-width / 2, -height / 2);
context.fillText("I'm Back to Top",5,50);
}
// translation the rectangle.
function drawPath(context) {
context.translate(200, 200);
context.scale(2,2); // Scale twice size of original shape
context.strokeStyle = "green";
context.beginPath();
context.moveTo(0, 40);
context.lineTo(80, 40);
context.lineTo(40, 80);
context.closePath();
context.stroke();
}
// new point.x = x * cos(-angle) - y * sin(-angle),
// new point.y = y * cos(-angle) + x * sin(-angle)
function renderRotateText(context) {
context.font="24px Arial";
context.fillStyle="red";
context.fillText("i'm here!!!",5,50);
// rotate -90 degreee
// context.rotate(-Math.PI/2);
// context.fillStyle="blue";
// context.fillText("i'm here!!!", -400,30);
// rotate 90 degreee
context.rotate(Math.PI/2);
context.fillStyle="blue";
context.fillText("i'm here!!!", 350,-420);
console.log(Math.sin(Math.PI/2));
// rotae 90 degree and draw 10 lines
context.fillStyle="green";
for(var i=0; i<4; i++) {
var x = (i+1)*20;
var y = (i+1)*60;
var newX = y;
var newY = -x;
context.fillRect(newX, newY, 200, 6);
}
}
function saveAndRestoreContext(context) {
context.save();
context.translate(200,200);
context.rotate(Math.PI/2);
context.fillStyle="black";
context.fillText("2D Context Rotate And Translate", 10, 10);
context.restore();
context.fillText("2D Context Rotate And Translate", 10, 10);
}
相關(guān)文章
html5使用html2canvas實(shí)現(xiàn)瀏覽器截圖的示例
這篇文章主要介紹了html5使用html2canvas實(shí)現(xiàn)瀏覽器截圖的示例,非常具有實(shí)用價(jià)值,需要的朋友可以參考下2017-08-31- 本篇文章主要介紹了HTML5+CSS3模仿優(yōu)酷視頻截圖功能示例,在用戶上傳完成后,可以對(duì)播放的視頻進(jìn)行截圖,非常具有實(shí)用價(jià)值,需要的朋友可以參考下。2017-01-05
canvas與html5實(shí)現(xiàn)視頻截圖功能示例
本篇文章主要介紹了canvas與html5實(shí)現(xiàn)視頻截圖功能示例,非常具有實(shí)用價(jià)值,需要的朋友可以參考下。2016-12-15Html5新特性用canvas標(biāo)簽畫(huà)多條直線附效果截圖
這篇文章主要介紹了Html5新特性用canvas標(biāo)簽畫(huà)多條直線的具體實(shí)現(xiàn),并附效果截圖,感興趣的朋友可以參考下2014-06-30- 在簡(jiǎn)單的矩形不能滿足需求的情況下,可以同本例提供的方法來(lái)繪制復(fù)雜的形狀或路徑。下面為大家介紹下HTML5如何在canvas中繪制復(fù)雜形狀,需要的朋友可以參考下2014-06-23
HTML、CSS和jQuery實(shí)現(xiàn)圖片折疊展開(kāi)的效果
本文為大家介紹下使用HTML、CSS和jQuery實(shí)現(xiàn)圖片折疊展開(kāi)的效果,具體的實(shí)現(xiàn)代碼如下,感興趣的朋友可以參考下2013-12-30使用HTML截圖并保存為本地圖片的實(shí)現(xiàn)代碼
本文通過(guò)實(shí)例代碼給大家分享了使用HTML截圖并保存為本地圖片的實(shí)現(xiàn)代碼,代碼簡(jiǎn)單易懂,非常不錯(cuò),具有一定的參考借鑒價(jià)值,需要的朋友參考下吧2018-11-14