1. 绘制简单路径
<!DOCTYPE html>
<html>
<head lang="en">
<meta charset="UTF-8">
<title></title>
</head>
<body>
<h1>学习canvas</h1>
<canvas id="canvasTest1" height="300" width="500"></canvas>
<canvas id="canvasTest2" height="300" width="500"></canvas>
<canvas id="canvasTest3" height="300" width="500"></canvas>
<canvas id="canvasTest4" height="300" width="500"></canvas>
<canvas id="canvasTest5" height="300" width="500"></canvas>
<script type="text/javascript">
function drawLine(id) {
var canvas = document.getElementById(id);
if(canvas === null){
return false;
}
var context = canvas.getContext('2d');
context.fillStyle='#EEEEFF';
context.fillRect(0,0,500,300);
context.beginPath();
context.lineWidth = 10;
context.lineCap = 'round';
context.moveTo(20,20);
context.lineTo(20,200);
context.stroke();
}
drawLine('canvasTest1');
function drawLine2(id) {
var canvas = document.getElementById(id);
if(canvas === null){
return false;
}
var context = canvas.getContext('2d');
context.fillStyle='#EEEEFF';
context.fillRect(0,0,500,300);
context.beginPath();
context.lineWidth = 10;
context.lineJoin = 'round';
context.moveTo(20,20);
context.lineTo(20,200);
context.lineTo(200,200);
context.stroke();
}
drawLine2('canvasTest2');
function drawLine3(id) {
var canvas = document.getElementById(id);
if(canvas === null){
return false;
}
var context = canvas.getContext('2d');
context.fillStyle='#EEEEFF';
context.fillRect(0,0,500,300);
context.beginPath();
context.lineWidth = 5;
context.setLineDash([5]);
context.moveTo(20,20);
context.lineTo(20,200);
context.lineTo(200,200);
context.stroke();
}
drawLine3('canvasTest3');
function drawLine4(id) {
var canvas = document.getElementById(id);
if(canvas === null){
return false;
}
var context = canvas.getContext('2d');
context.fillStyle='#EEEEFF';
context.fillRect(0,0,500,300);
context.beginPath();
context.moveTo(150,20);
context.lineWidth = 5;
context.arcTo(150,100,50,20,30);
context.stroke();
}
drawLine4('canvasTest4');
function drawLine5(id) {
var canvas = document.getElementById(id);
if(canvas === null){
return false;
}
var context = canvas.getContext('2d');
context.fillStyle='#EEEEFF';
context.fillRect(0,0,500,300);
var n=0;
var dx = 150;
var dy = 150;
var s = 100;
context.beginPath();
context.globalCompositeOperation = 'and';
context.fillStyle = 'rgb(100,255,100)';
var x = Math.sin(0);
var y = Math.cos(0);
var dig = Math.PI / 15 *11;
context.moveTo(dx,dy);
for(var i=0; i<30; i++){
var x = Math.sin(i*dig);
var y = Math.cos(i*dig);
context.bezierCurveTo(dx + x*s,dy + y*s - 100, dx + x*s + 100,dy + y*s, dx + x*s,dy + y*s);
}
context.closePath();
context.fill();
context.stroke();
}
drawLine5('canvasTest5');
</script>
</body>
</html>