HTML&JS笔记(1)

canvas基本绘图

<!DOCTYPE html> 

<html>

<body>

<meta charset="utf-8">

<canvas id="myCanvas" width="500" height="500">

你的浏览器不支持HTML5

</canvas>

<P>你好,世界</p>

<script type="text/javascript">

var c=document.getElementById("myCanvas");

var ctx=c.getContext("2d");



ctx.lineWidth=10;

ctx.strokeStyle="red";

ctx.lineCap="round";

ctx.beginPath();

ctx.moveTo(10,10);

ctx.lineTo(150,50);

ctx.stroke();



ctx.strokeRect(50,60,20,30);

ctx.fillStyle="green";

ctx.beginPath();

ctx.fillRect(65,75,90,70);

ctx.stroke();



ctx.lineWidth=3;

ctx.strokeStyle="red";

ctx.beginPath();

ctx.arc(300,300,100,0,360*Math.PI/180,true);

ctx.stroke();

ctx.beginPath();

ctx.arc(300,300,50,0,160*Math.PI/180,true);

ctx.stroke();

</script>

</body>

</html>

 

效果:

HTML&JS笔记(1)

 


 

你可能感兴趣的:(html)