canvas绘图

1.基本用法

<canvas id="drawing" width="200" height="200">A drawing of something</canvas>

<script>

var drawing = document.getElementById('drawing');

if(drawing.getContext){

var context = drawing.getContext("2d')

}

</script>

2.2D上下文

填充fillStyle和描边strokeStyle

if(drawing.getContext){

var context = drawing.getContext('2d');

context.strokeStyle = "red";

context.fillStyle = "#0000ff"

}

3.绘制矩形

与矩形相关的方法：fillRect(),strokeRect(),clearRect()

矩形，描边同理

if(drawing.getContext){

var context = drawing.getContext('2d');

context.fillStyle="red";

context.fillRect(10,10,50,50);

context.fillStyle="#ff0000";

context.fillRect(30,30,50,50);

／／在两个矩形重叠的地方清楚一个小矩形

context.clearRect(40,40,10,10)

}

4.绘制路径

待续。。。。