赞
踩
<!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>
效果:
比较重要的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()
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()
}
}
效果:
context.arc
最后一个参数是true,表示逆时针,默认是false,表示顺时针:
context.arc(300,300,100,0,1.5*Math.PI, false)
context.closePath()
会自动把图形连接成一个封闭图形: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() } }
再看一个例子:
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() } } }
赞
踩
Copyright © 2003-2013 www.wpsshop.cn 版权所有,并保留所有权利。