Canvas绘制线条
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>线条</title>
</head>
<body>
<canvas id="canvas" width="850" height="750" style="border:1px solid #000"></canvas>
<script>
var canvas = document.getElementById('canvas');
if (canvas.getContext) {
var ctx = canvas.getContext('2d');
ctx.beginPath();
ctx.moveTo(50, 100);
ctx.lineTo(80, 200);
ctx.closePath();
ctx.stroke();
}
</script>
</body>
</html>
Canvas绘制三角形
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>三角形</title>
</head>
<body>
<canvas id="canvas" width="850" height="750" style="border:1px solid #000"></canvas>
<script>
var canvas = document.getElementById('canvas');
if (canvas.getContext) {
var ctx = canvas.getContext('2d');
ctx.beginPath();
ctx.moveTo(300, 100);
ctx.lineTo(120, 130);
ctx.lineTo(150, 220);
ctx.strokeStyle = "#ff6600";
ctx.fillStyle = "#ff6600";
ctx.closePath();
ctx.stroke();
}
</script>
</body>
</html>
Canvas绘制矩形
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>矩形</title>
</head>
<body>
<canvas id="canvas" width="850" height="750" style="border:1px solid #000"></canvas>
<script>
var canvas = document.getElementById('canvas');
if (canvas.getContext) {
var ctx = canvas.getContext('2d');
ctx.beginPath();
ctx.fillStyle = '#ff6600';
ctx.fillRect(250, 250, 80, 100);
ctx.beginPath();
ctx.strokeStyle = 'green';
ctx.strokeRect(320, 120, 120, 100);
ctx.translate(10, 10);
ctx.lineWidth = 5;
ctx.fillStyle = '#ff6600';
ctx.strokeStyle = 'green';
ctx.rect(0, 0, 80, 100);
ctx.stroke();
ctx.fill();
ctx.clearRect(10, 10, 50, 60);
}
</script>
</body>
</html>
Canvas绘制圆弧
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>圆弧</title>
</head>
<body>
<canvas id="canvas" width="850" height="750" style="border:1px solid #000"></canvas>
<script>
var canvas = document.getElementById('canvas');
if (canvas.getContext) {
var ctx = canvas.getContext('2d');
ctx.beginPath();
ctx.fillStyle = '#ff6600';
ctx.arc(70, 70, 60, 0, 2 * Math.PI, true);
ctx.fill();
ctx.translate(200, 200);
ctx.beginPath();
ctx.strokeStyle = '#ff6600';
ctx.arc(70, 70, 60, 0, 2 * Math.PI, true);
ctx.stroke();
ctx.translate(100, 100);
ctx.beginPath();
ctx.strokeStyle = '#ff6600';
ctx.arc(70, 70, 60, 0, 60 * Math.PI / 180, false);
ctx.stroke();
}
</script>
</body>
</html>
Canvas绘制图片
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>图片</title>
</head>
<body>
<canvas id="canvas" width="850" height="750" style="border:1px solid #000"></canvas>
<script>
var canvas = document.getElementById('canvas');
if (canvas.getContext) {
var ctx = canvas.getContext('2d');
var img = new Image();
img.src = './heads.png';
img.width = '30px';
img.heihgt = '300px';
img.onload = function () {
ctx.drawImage(img, 10, 10);
}
}
</script>
</body>
</html>
Canvas绘制文本
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>文本</title>
</head>
<body>
<canvas id="canvas" width="850" height="750" style="border:1px solid #000"></canvas>
<script>
var canvas = document.getElementById('canvas');
if (canvas.getContext) {
var ctx = canvas.getContext('2d');
ctx.font = '30px Arial';
ctx.fillText('hello world', 10, 50, 200);
ctx.strokeText('hello world', 10, 350, 200);
}
</script>
</body>
</html>
