canvas简述
Posted tengx
tags:
篇首语：本文由小常识网(cha138.com)小编为大家整理，主要介绍了canvas简述相关的知识，希望对你有一定的参考价值。
canvas是html5推出的画布技术 有2D和3D 目前3D兼容性很差但相信随着VR的兴起 3D也会逐渐发力 目前只讲述关于2D 相关的API 以及 业务逻辑 常用场景 游戏等等
API部分
<style> canvas{ border:solid 2px red } </style> <canvas id="cvs" width="800" height="800"></canvas> </head> <body> <script> //获取canvas以及其上下文对象 var cvs = document.querySelector(‘#cvs‘) var ctx = cvs.getContext(‘2d‘) //开始绘制 ctx.beginPath() ctx.moveTo(200,200) ctx.lineTo(200,400) ctx.lineTo(100,400) ctx.lineWidth = 15 ctx.closePath() ctx.strokeStyle = ‘red‘ ctx.fillStyle = ‘blue‘ ctx.stroke() ctx.fill() //上面自己绘制了一个三角形 </script>
上面自己绘制了一个三角形 在canvas中的路径 良好的习惯每次 绘制结束 都要闭合 每次绘制开始都要重新开启路径 第一步定点 然后 绘制 路径 填充非常简单
下面放canvas绘制矩形 以及 圆弧 以及 绘制图片的API demo
ctx.fillStyle = ‘red‘ ctx.fillRect(200,200,200,200) ctx.strokeStyle = ‘blue‘ ctx.strokeRect(400,400,400,400)
上面绘制了两个canvas预定义的 实心矩形和 空心矩形
在绘制圆形之前首先要明白canvas 圆形绘制是根据弧度制的 也就是角度跟弧度弧度是成比例的 是什么一个关系 圆的周长 = 2πr 如果将360° 跟 周长划一个关系的话 那么必须提取一个唯一的变量那就是r 在不同大小的圆下r也是不同的
将r提取出来 周长 / 2π = r 360° / 2π = 57.29° 那么我们就可以说 无论在什么情况下 1r 的弧度就等于 = 57.29° 的角度 那么有了这个对等的关系就非常简单了 我们可以假设360°就是 2π 的弧度 实际上canvas也是这么实现的 这两个是常量 在角度 和 r 有一个对等的比例关系下 可以将其忽略 在这个前提下 那么如果我们要计算30°的弧度是多少就非常简单了 就是360 / 30 * 2π 这样我们就计算出了30 的弧度 下面讲述一下API用法
以上是关于canvas简述的主要内容，如果未能解决你的问题，请参考以下文章