<!DOCTYPE html>
<html lang="zh-CN">
<head>
<meta charset="utf-8">
<title></title>
<style type="text/css">
* {margin: 0;padding: 0;}
canvas {border: 2px dotted #ddd}
</style>
</head>
<body>
<canvas id=drawingCanvas1 width=500 height=300></canvas>
<canvas id=drawingCanvas2 width=500 height=300></canvas>
<canvas id=drawingCanvas3 width=500 height=300></canvas>
<canvas id=drawingCanvas4 width=500 height=300></canvas>
<canvas id=drawingCanvas5 width=500 height=300></canvas>
<canvas id=drawingCanvas6 width=500 height=300></canvas>
<script>
// 直线
var canvas = document.getElementById('drawingCanvas1')
var context = canvas.getContext('2d')
// 设置
context.lineWidth = 20 // 线条宽度
context.strokeStyle = 'rgba(205, 40, 40, 0.5)' // 线条颜色
context.lineCap = 'round' // 线头形状
context.moveTo(10, 10) // 起点
context.lineTo(400, 40) // 终点
// 绘制
context.stroke()
/**
* 重新开始一个新线段的绘制
* 如果没有这一步，那么每次调用stroke()，都会把画布上原有的线段再重新绘制一遍
*/
context.beginPath()
// 设置
context.lineCap = 'square'
context.moveTo(10, 10)
context.lineTo(400, 90)
// 绘制
context.stroke()
// 三角形
var canvas = document.getElementById('drawingCanvas2')
var context = canvas.getContext('2d')
context.moveTo(255, 50)
context.lineTo(50, 250)
context.lineTo(450, 250)
context.closePath()
context.fillStyle = 'blue'
context.fill()
context.lineWidth = 5
context.strokeStyle = 'red'
context.stroke()
// 曲线
var canvas = document.getElementById('drawingCanvas4')
var context = canvas.getContext('2d')
var centerX = 250
var centerY = 150
var radius = 100
var startingAngle = 0 * Math.PI
var endingAngle = 0.5 * Math.PI
context.arc(centerX, centerY, radius, startingAngle, endingAngle)
context.closePath()
context.stroke()
context.beginPath()
var endingAngle = 2 * Math.PI
context.arc(centerX, centerY, radius, startingAngle, endingAngle)
context.stroke()
// 控制点
var canvas = document.getElementById('drawingCanvas5')
var context = canvas.getContext('2d')
context.moveTo(100, 100)
var control1_x = 60
var control1_y = 10
var control2_x = 40
var control2_y = 90
var endPointX = 0
var endPointY = 0
context.bezierCurveTo(control1_x, control1_y, control2_x, control2_y,
endPointX, endPointY)
context.stroke()
// 变换
var canvas = document.getElementById('drawingCanvas6')
var context = canvas.getContext('2d')
context.translate(100, 100)
var copies = 10
for (var i = 1; i < copies; i++) {
context.rotate(2 * Math.PI * 1 / (copies -1))
context.rect(0, 0, 60, 60)
}
context.stroke()
</script>
</body>
</html>
浙公网安备 33010602011771号