摘要 今天小编跟大家讲解下有关有趣的Canvas ，相信小伙伴们对这个话题应该有所关注吧，小编也收集到了有关有趣的Canvas 的相关资料，希望小伙

今天小编跟大家讲解下有关有趣的Canvas ，相信小伙伴们对这个话题应该有所关注吧，小编也收集到了有关有趣的Canvas 的相关资料，希望小伙伴们看了有所帮助。

Canvas 是 html5 提供的一个用于展示绘图效果的标签. Canvas 原意为画布, 在 html 页面中用于展示绘图效果. 最早 Canvas 是苹果提出的一个方案, 今天已经在大多数浏览器中实现。

canvas 的使用领域

游戏大数据可视化数据banner 广告多媒体模拟仿真远程操作图形编辑

判断浏览器是否支持 canvas 标签

var canvas = document.getElementById('canvas')if (canvas.getContext) { console.log('你的浏览器支持Canvas!')} else { console.log('你的浏览器不支持Canvas!')}canvas 的基本用法

1、使用 canvas 标签, 即可在页面中开辟一格区域 可以设置其宽高 宽高为 300 和 150

<canvas></canvas>

2、获取 dom 元素 canvas

canvas 本身不能绘图. 是使用 JavaScript 来完成绘图. canvas 对象提供了各种绘图用的 api。

varcas =document.querySelector('canvas')

3、通过 cas 获取上下文对象(画布对象!)

varctx = cas.getContext('2d')

4、通过 ctx 开始画画（设置起点 设置终点 连线-描边 ）

ctx.moveTo(10, 10)ctx.lineTo(100, 100)ctx.stroke()绘制线条设置开始位置:context.moveTo( x, y )设置终点位置:context.lineTo( x, y )描边绘制:context.stroke()填充绘制:context.fill()闭合路径:context.closePath()

canvas 还可以设置线条的相关属性 如下：

CanvasRenderingContext2D.lineWidth设置线宽.CanvasRenderingContext2D.strokeStyle设置线条颜色.CanvasRenderingContext2D.lineCap设置线末端类型 'butt'( 默认 ), 'round', 'square'.CanvasRenderingContext2D.lineJoin设置相交线的拐点 'miter'(默认) 'round', 'bevel',CanvasRenderingContext2D.getLineDash()获得线段样式数组.CanvasRenderingContext2D.setLineDash()设置线段样式.CanvasRenderingContext2D.lineDashOffset绘制线段偏移量.

封装一个画矩形的方法

function myRect(ctxTmp, x, y, w, h) { ctxTmp.moveTo(x, y) ctxTmp.lineTo(x + w, y) ctxTmp.lineTo(x + w, y + h) ctxTmp.lineTo(x, y + h) ctxTmp.lineTo(x, y) ctxTmp.stroke()}var cas = document.querySelector('canvas')var ctx = cas.getContext('2d')myRect(ctx, 50, 50, 200, 200)绘制矩形fillRect( x , y , width , height)填充以(x,y)为起点宽高分别为 width、height 的矩形 默认为黑色stokeRect( x , y , width , height)绘制一个空心以(x,y)为起点宽高分别为 width、height 的矩形clearRect( x, y , width , height )清除以(x,y)为起点宽高分别为 width、height 的矩形 为透明绘制圆弧

绘制圆弧的方法有

CanvasRenderingContext2D.arc()CanvasRenderingContext2D.arcTo()

6 个参数: x y(圆心的坐标) 半径 起始的弧度(不是角度 deg) 结束的弧度 (bool 设置方向 ! )

var cas = document.querySelector('canvas')var ctx = cas.getContext('2d')ctx.arc(100, 100, 100, 0, degToArc(360))ctx.stroke()// 角度转弧度function degToArc(num) { return (Math.PI / 180) * num}

绘制扇形

var cas = document.querySelector('canvas')var ctx = cas.getContext('2d')ctx.arc(300, 300, 200, degToArc(125), degToArc(300))// 自动连回原点ctx.closePath()ctx.stroke()function degToArc(num) { return (Math.PI / 180) * num}制作画笔声明一个变量作为标识鼠标按下的时候 记录起点位置鼠标移动的时候 开始描绘并连线鼠标抬起的时候 关闭开关var cas = document.querySelector('canvas')var ctx = cas.getContext('2d')var isDraw = false// 鼠标按下事件cas.addEventListener('mousedown', function () { isDraw = true ctx.beginPath()})// 鼠标移动事件cas.addEventListener('mousemove', function (e) { if (!isDraw) { // 没有按下 return } // 获取相对于容器内的坐标 var x = e.offsetX var y = e.offsetY ctx.lineTo(x, y) ctx.stroke()})cas.addEventListener('mouseup', function () { // 关闭开关了! isDraw = false})手动涂擦

原理和画布相似 只不过用的是clearRect()方法。

var cas = document.querySelector('canvas')var ctx = cas.getContext('2d')ctx.fillRect(0, 0, 600, 600)// 开关var isClear = falsecas.addEventListener('mousedown', function () { isClear = true})cas.addEventListener('mousemove', function (e) { if (!isClear) { return } var x = e.offsetX var y = e.offsetY var w = 20 var h = 20 ctx.clearRect(x, y, w, h)})cas.addEventListener('mouseup', function () { isClear = false})刮刮乐首先需要设置奖品和画布 将画布置于图片上方盖住 随机设置生成奖品。当手触摸移动的时候 可以擦除部分画布 露出奖品区。<div> <img src="http://www.aidi.net.cn/article/detial/9265/./images/2.jpg" alt="" /> <canvas width="600" height="600"></canvas></div>

css

img { width: 600px; height: 600px; position: absolute; top: 10%; left: 30%;}canvas { width: 600px; height: 600px; position: absolute; top: 10%; left: 30%; border: 1px solid #000;}

js

var cas = document.querySelector('canvas')var ctx = cas.getContext('2d')var img = document.querySelector('img')// 加一个遮罩层ctx.fillStyle = '#ccc'ctx.fillRect(0, 0, cas.width, cas.height)setImgUrl()// 开关var isClear = falsecas.addEventListener('mousedown', function () { isClear = true})cas.addEventListener('mousemove', function (e) { if (!isClear) { return } var x = e.offsetX var y = e.offsetY ctx.clearRect(x, y, 30, 30)})cas.addEventListener('mouseup', function () { isClear = false})function setImgUrl() { var arr = ['./images/1.jpg', './images/2.jpg', './images/3.jpg', './images/4.jpg'] // 0-3 var random = Math.round(Math.random() * 3) img.src = arr[random]}

更多demo 请查看github.com

来自：https://segmentfault.com/a/1190000022858124

来源：爱蒂网