基本绘制
- var canvas = document.getElementById('canvas'); if (canvas.getContext) {
- var context = canvas.getContext('2d'); // 线宽
- context.lineWidth = 4; // 画笔颜色
- context.strokeStyle = 'red'; // 填充色
- context.fillStyle = "red"; // 线帽类型
- context.lineCap = 'butt'; // round, square // 开始路径
- context.beginPath(); // 起点
- context.moveTo(10,10); // 终点
- context.lineTo(150,50); // 绘制
- context.stroke(); ｝
矩形
- var canvas = document.getElementById('canvas'); if (canvas.getContext) {
- context.beginPath(); context.strokeRect(10,10,70,40);
- // 矩形的另一种方式 context.rect(10,10.70,40);
- context.stroke();
- // 实心矩形 context.beginPath();
- context.fillRect(10,10,70,40); // 另一种方式实心矩形
- context.beginPath(); context.rect(10,10,70,40);
- context.fill(); ｝
圆形
