抽了一些时间写些笔记。
矩形：
code:
<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><title>Title</title><style>canvas {border: thin solid black;}body > * {float: left;}</style>
</head>
<body>
<canvas id="canvas" width="500px" height="120px"></canvas>
<script type="text/javascript">
var ctx=document.getElementById('canvas').getContext('2d');ctx.strokeStyle='red';
ctx.lineWidth='2';
ctx.beginPath();
ctx.moveTo(0,50);
ctx.lineTo(200,50);
ctx.stroke();ctx.strokeStyle='blak';
ctx.lineWidth=40;var xpos=50;
var styles=["butt","round","square"];
for(i=0;i<styles.length;i++){ctx.beginPath();ctx.lineCap=styles[i];ctx.moveTo(xpos,50);ctx.lineTo(xpos,150);ctx.stroke();xpos+=50;
}
</script>
</body>
</html>
圆形：
code:
<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><title>Title</title><style type="text/css">canvas {border: thin solid black;}body > * {float: left;}</style>
</head>
<body>
<canvas id="canvas" width="500" height="150"></canvas>
<script>var canvas = document.getElementById('canvas').getContext('2d');canvas.fillstyle = 'yellow';canvas.lineWidth = '3';canvas.beginPath();canvas.arc(70, 70, 60, 0, Math.PI * 2, true);canvas.stroke();canvas.beginPath();canvas.arc(200, 70, 60, Math.PI / 2, Math.PI, true);canvas.fill();canvas.stroke();canvas.beginPath();var val = 0;for (var i = 0; i < 4; i++) {canvas.arc(350, 70, 60, val, val + Math.PI / 4, false);val += Math.PI / 2;}canvas.closePath();canvas.fill();canvas.stroke();
</script>
</body>
</html>三角形矩形：
code:
<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><title>canvas矩形</title><style type="text/css">canvas{border:thin solid black;}body >*{float:left;}</style>
</head>
<body>
<canvas id="canvas" width="500" height="150"></canvas>
<script type="text/javascript">var can=document.getElementById('canvas').getContext('2d');can.fillStyle='yellow';can.strokeStyle='black';can.lineWidth=4;can.beginPath();can.moveTo(110,10);can.lineTo(110,100);can.lineTo(10,10);can.closePath();can.rect(120,10,100,90);can.rect(150,110,130,20);can.fill();can.stroke();
</script>
</body>
</html>圆弧：
code:
<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><title>canvas2d矩形</title><style type="text/css">canvas2d {border: thin solid black;}body > * {float: left;}</style>
</head>
<body>
<canvas id="canvas" width="500" height="150"></canvas>
<script type="text/javascript">var canvas = document.getElementById('canvas');var canvas2d = canvas.getContext('2d');var point1 = [100, 10];var point2 = [200, 10];var point3 = [200, 110];draw();canvas2d.onmousemove = function (e) {if (e.ctrlKey) {point1 = [e.clientX, e.clientY];} else if (e.shiftKey) {point2 = [e.clientX, e.clientY];} else {point3 = [e.clientX, e.clientY];}canvas.clearRect(0, 0, 540, 140);draw();}function draw() {canvas2d.fillstyle = 'yellow';canvas2d.strokeStyle = 'black';canvas2d.lineWidth = 4;canvas2d.beginPath();canvas2d.moveTo(point1[0], point1[1]);canvas2d.arcTo(point2[0], point2[1], point3[0], point3[1], 100);canvas2d.stroke();point(point1[0], point1[1]);point(point2[0], point2[1]);point(point3[0], point3[1]);canvas2d.beginPath();canvas2d.moveTo(point1[0], point1[1]);canvas2d.lineTo(point2[0], point2[1]);canvas2d.lineTo(point3[0], point3[1]);canvas2d.stroke();}function point(x,y) {canvas2d.lineWidth = 1;canvas2d.strokeStyle = 'red';canvas2d.strokeRect(x - 2, y - 2, 4, 4);}</script>
</body>
</html>
参考：HTML5权威指南
