html旋转 缩放 移动,HTML5之Canvas绘图——Canvas画布调整之移动、缩放、旋转

HTML5之Canvas绘图——Canvas画布调整之移动、

缩放、旋转

body{margin:20px auto; padding:0; width:1000px }

canvas{border:dashed 2px #ccc}

span{font-size:16px; cursor:pointer}

function $$(id){

return document.getElementById(id);

}

function drawRect(co){

var can = $$('can');

cans = can.getContext('2d');

cans.strokeStyle = co;

cans.lineWidth = 3;

cans.strokeRect(600,50,80,40);

}

function drawCircle(co){

cans.beginPath();

cans.arc(30,30,30,0,Math.PI*2,1);

cans.closePath();

cans.strokeStyle = co;

cans.lineWidth = 3;

cans.stroke();

}

function mv_click(){

var can = $$('can');

var cans = can.getContext('2d');

cans.translate(40,40);

drawRect('black');

}