Draw a line graph
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>canvas demo</title>
</head>
<body>
<canvas id="canvas" style="border: 1px solid #aaa; display: block; margin: 50px auto;">
</canvas>
<script>
window.onload = function() {
var canvas = document.querySelector('canvas')
canvas.height = 768
canvas.width = 1024
var context = canvas.getContext('2d')
if (!context) {
alert('当前浏览器不支持canvas,请更换浏览器后再试')
}
// 每次绘制都要用beginPath和closePath分开
context.beginPath()
// 把画笔落在(100,100)处
context.moveTo(100, 100)
context.lineTo(600,600)
context.lineTo(700,600)
context.lineTo(700,300)
context.lineTo(0,600)
context.closePath()
context.lineWidth = 5
context.strokeStyle = 'green'
context.fillStyle = 'lightgreen'
// 填充颜色
context.fill()
// 绘制边框
context.stroke()
// 每次绘制都要用beginPath和closePath分开
context.beginPath()
context.moveTo(650,650)
context.lineTo(650,750)
context.lineTo(750,750)
context.lineTo(750,650)
context.closePath()
context.strokeStyle = 'lightblue'
context.stroke()
}
</script>
</body>
</html>
Effect: The
more important API:
// 初始化
// 获取当前canvas
var canvas = document.querySelector('canvas')
// 设置canvas大小
canvas.height = 768
canvas.width = 1024
// 获取context作为画布，这里绘制2d图形
var context = canvas.getContext('2d')
// 每次绘制都要用beginPath和closePath分开
context.beginPath()
// 把画笔落在(100,100)处
context.moveTo(100, 100)
// 画到下一个点的位置
context.lineTo(600,600)
// 结束绘画路径
context.closePath()
// 填充颜色
context.fill()
// 绘制边框
context.stroke()
Draw a graph
window.onload = function () {
var canvas = document.querySelector('#canvas')
canvas.height = 768
canvas.width = 1024
var context = canvas.getContext('2d')
if(!context) {
alert('当前浏览器不支持canvas')
} else {
context.lineWidth = 5
context.strokeStyle = 'lightblue'
context.arc(300,300,100,0,1.5*Math.PI, true)
context.stroke()
}
}
Effect: The
context.arclast parameter is true, which means counterclockwise, and the default is false, which means clockwise:
context.arc(300,300,100,0,1.5*Math.PI, false)
Note that context.closePath()the graph will be automatically connected into a closed graph:
window.onload = function () {
var canvas = document.querySelector('#canvas')
canvas.height = 768
canvas.width = 1024
var context = canvas.getContext('2d')
if(!context) {
alert('当前浏览器不支持canvas')
} else {
context.lineWidth = 5
context.strokeStyle = 'lightblue'
context.beginPath()
context.arc(300,300,100,0,1.5*Math.PI, false)
context.closePath()
context.stroke()
}
}
Look at another example:
window.onload = function () {
var canvas = document.querySelector('#canvas')
canvas.height = 768
canvas.width = 1024
var context = canvas.getContext('2d')
if (!context) {
alert('当前浏览器不支持canvas')
} else {
context.lineWidth = 5
context.strokeStyle = 'lightblue'
for (var i = 0; i < 10; i++) {
context.beginPath()
context.arc(50 + i * 100, 200, 40, 0, 2 * Math.PI * (i + 1) / 10)
context.stroke()
}
context.fillStyle = 'pink'
for (var i = 0; i < 10; i++) {
context.beginPath()
context.arc(50 + i * 100, 400, 40, 0, 2 * Math.PI * (i + 1) / 10)
context.stroke()
context.fill()
}
}
}
