<!-- JavaScript-->
function doFirst1(){
var x = document.getElementById('canvas1');
canvas = x.getContext('2d');
var pic = new Image();
pic.src="/image/sdoor.jpg";
canvas.drawImage(pic, 0, 0);
canvas.drawImage(pic, 100, 50,150,80); //축소 image Size
canvas.drawImage(pic, 300, 90, 100, 50, 30, 280, 150, 100);//image 복사 확대 축소 image Crop
canvas.rotate(0.2);
canvas.clearRect(470, -60, 120, 40);
canvas.restore();
canvas.rotate(-0.4);
canvas.clearRect(250, 100, 120, 30);
}
window.addEventListener("load",doFirst1,false);
<!-- HTML5 -->
<section id ="main">
<canvas id = "canvas1" width = "600" height = "400" style = "border:1px solid #000000">
If you can see this, I'm sorry. <br />
You need to get <a href = "https://www.google.com/chrome/browser/desktop/index.html">
Google Chrome browser</a> to see HTNL5 Canvas
</canvas>
</section>
clearRect로 건물 이름을 감추었으며 rotate로 회전시켜 글 간판 각도와 마추었다.
<!-- JavaScript-->
function doFirst2(){
var x = document.getElementById('canvas2');
canvas = x.getContext('2d');
window.addEventListener("mousemove",mymove,false);
}
function mymove(e)
{
//canvas.clearRect(0,0,600,400); //주석을 해제하면 그림을 못그려...
var xPos = e.clientX;
var yPos = (e.clientY - 350);
canvas.fillRect(xPos,yPos,50,50);
}
window.addEventListener("load",doFirst2,false);
<!-- HTML5 -->
<section id ="main">
<canvas id = "canvas2" width = "600" height = "400" style = "border:1px solid #000000">
If you can see this, I'm sorry. <br />
You need to get <a href = "https://www.google.com/chrome/browser/desktop/index.html">
Google Chrome browser</a> to see HTNL5 Canvas
</canvas>
</section>
댓글