canvas 是 HTML5 当中我最喜欢的一切新特征中我最喜欢的一个标签了。由于它太壮大了,种种有意思的殊效都能够完成。
1. canvas 的基础运用方法
- 它是一个行内块元素
- 默许大小是 300 x 150,不能在 css 里给他设置款式,只能在标签内写它的属性。如 width = 400,height = 300
- 猎取画布
var canvas = document。querySelector("canvas")
- 猎取画笔(上下文)
var ctx = canvas.getContext('2d')
2. canvas 绘制基础的图形
添补矩形
ctx.fillRect(0,0,100,100)
fill:跟添补有关
Rect: 描写一个矩形
添补图形设置款式
ctx.fillStyle = 'green'
描边矩形
ctx.strokeRect(100,100,100,100)
描边图形设置款式
ctx.strokeStyle = 'white'
ctx.lineWidth = 100
消灭全部画布
ctx.clearRect(0,0,canvas.width,canvas.height)
画线段
ctx.moveTo(100,100)
ctx.lineTo(100,100)
描边
ctx.stroke()
添补
ctx.fill()-
起始点和完毕点衔接
ctx.closePath()
ctx.save()开首
......
ctx.restore()末端
3. 画布时钟
运用画布我们能够画一个时钟,包含刻度和时针,每一秒走的刻度能够用 Data 对象经由过程定时器来常常更新。
var canvas = document.querySelector("canvas"); var ctx = canvas.getContext("2d"); function move() { ctx.save() ctx.translate(300,300) // 初始化一些大众的款式 ctx.lineCap = 'round' ctx.strokeStyle = 'black' ctx.lineWidth = 8 ctx.scale(0.5,0.5) // 画外面的圆 ctx.save(); ctx.beginPath(); ctx.strokeStyle = 'gold'; ctx.arc(0,0,150,0,2*Math.PI); ctx.stroke(); ctx.restore(); // 画内里的刻度 ctx.save() ctx.beginPath(); for (var i=0; i < 12; i++) { ctx.moveTo(0,-125); ctx.lineTo(0,-140); ctx.stroke() ctx.rotate(30*Math.PI/180) } ctx.restore() // 分针刻度 ctx.save() ctx.lineWidth = 3 for (var i = 0; i < 60; i++) { if (i % 5 != 0){ ctx.beginPath() ctx.moveTo(0,-135); ctx.lineTo(0,-140); ctx.stroke() } ctx.rotate(6*Math.PI/180) } ctx.restore() // 当前时候 var date = new Date() var s = date.getSeconds() var min = date.getMinutes() + s/60 var h = date.getHours() + min/60 // 时针 ctx.save() ctx.rotate(30*h*Math.PI/180) ctx.lineWidth = 14 ctx.beginPath() ctx.moveTo(0,-80) ctx.lineTo(0,20) ctx.stroke() ctx.restore() // 分针 ctx.save() ctx.lineWidth = 10 ctx.rotate(6*min*Math.PI/180) ctx.beginPath() ctx.rotate(-30*Math.PI/180) ctx.moveTo(0,-120) ctx.lineTo(0,30) ctx.stroke() ctx.restore() //秒针 ctx.save() ctx.lineWidth = 6 ctx.strokeStyle = 'pink' ctx.fillStyle = 'pink' ctx.rotate(6*s*Math.PI/180) ctx.beginPath() ctx.arc(0,0,10,0,2*Math.PI) ctx.fill() ctx.beginPath() ctx.moveTo(0,-125) ctx.lineTo(0,30) ctx.stroke() ctx.beginPath() ctx.arc(0,-135,10,0,2*Math.PI) ctx.stroke() ctx.restore() ctx.restore() } setInterval(function () { ctx.clearRect(0,0,canvas.width,canvas.height) move() },1000)
静止的图象如下图。
刮刮卡结果
运用 canvas 的图形合成的属性能够完成图片合成的结果。细致应用于刮刮卡。
globalCompositeOperation属性设置或返回如何将一个源(新的)图象绘制到目的(已有)的图象上
源图象 = 您盘算安排到画布上的画图
目的图象 = 您已安排在画布上的画图
var canvas = document.querySelector("canvas") var ctx = getCtx() log(ctx) ctx.fillStyle = 'yellow' ctx.fillRect(0,0,400,400) ctx.globalCompositeOperation = 'destination-out'; // 鼠标按下 canvas.onmousedown = function (event) { ctx.beginPath() ctx.arc(event.clientX - canvas.offsetLeft,event.clientY - canvas.offsetTop, 20,0,2*Math.PI) ctx.fill() // 鼠标挪动 document.onmousemove = function (event) { ctx.beginPath() ctx.arc(event.clientX - canvas.offsetLeft,event.clientY - canvas.offsetTop, 20,0,2*Math.PI) ctx.fill() } // 鼠标抬起 document.onmouseup = function () { document.onmousemove = document.onmouseup = null } return false }
以上就是HTML5 Canvas的基础用法引见的细致内容,更多请关注ki4网别的相干文章!