canvasのラベル学習
2796 ワード
<!doctype html>
<html>
<head></head>
<body>
<canvas width="500" height="800" style="background:yellow" id="canvas">
canvas
</canvas>
<script>
// DOM
var canvas=document.getElementById('canvas');
//alert(canvas);
//
var cxt=canvas.getContext('2d');
//alert(cxt);
// 。
//
cxt.beginPath();
//
cxt.lineWidth=10;
//
cxt.strokeStyle="#ff9900";
//
cxt.moveTo(20,20);
//
cxt.lineTo(100,20);
//
cxt.stroke();
//
cxt.closePath();
// ，
//
cxt.beginPath();
//
cxt.lineWidth=3;
cxt.strokeStyle="green";
cxt.arc(200,200,50,0,360,false);
cxt.stroke();
//
cxt.closePath();
//
cxt.beginPath();
//
cxt.fillStyle="rgb(255,0,0)";
cxt.arc(200,100,50,0,360,false);
cxt.fill();
cxt.stroke();
cxt.closePath();
//
cxt.beginPath();
cxt.rect(300,20,100,100);
cxt.stroke();
cxt.closePath();
//
cxt.strokeRect(300,150,100,100)
//
cxt.beginPath();
cxt.rect(300,270,100,100);
cxt.fill();
cxt.closePath();
//
cxt.fillRect(300,390,100,100);
//
cxt.font="40px ";//css font
cxt.fillText(" ， ",20,300);
// 1
cxt.lineWidth=1;
cxt.strokeText(" ， ",20,350);
// webkit chrome
var img =new Image();
img.src="xiaomm.jpg";
cxt.drawImage(img,20,370,230,306);
//
cxt.beginPath();
//
cxt.moveTo(300,500);
cxt.lineTo(300,600);
cxt.lineTo(400,550);
cxt.closePath();//
cxt.stroke();
//
cxt.beginPath();
//
cxt.moveTo(300,600);
cxt.lineTo(300,700);
cxt.lineTo(400,650);
cxt.closePath();
cxt.fill();
//
//
cxt.save();
// 0,0
cxt.translate(20,20);
// /
// 0-360 = *Math.PI/180
cxt.rotate(-30*Math.PI/180);
//
cxt.lineWidth=10;
cxt.beginPath();
cxt.moveTo(0,0);
cxt.lineTo(20,100);
cxt.stroke();
cxt.closePath();
//
cxt.restore();
// 00 ，
//
cxt.save();
cxt.translate(20,370);
cxt.rotate(-10*Math.PI/180);
var img =new Image();
img.src="xiaomm.jpg";
cxt.drawImage(img,0,0,230,306);
cxt.restore();
</script>
</body>
</html>