成都网站推广,二级栏目网站,营业推广策略,销售公司做网站canvas介绍
Canvas 最初由Apple于2004 年引入#xff0c;用于Mac OS X WebKit组件#xff0c;为仪表板小部件和Safari浏览器等应用程序提供支持。后来#xff0c;它被Gecko内核的浏览器#xff08;尤其是Mozilla Firefox#xff09;#xff0c;Opera和Chrome实现#x…canvas介绍
Canvas 最初由Apple于2004 年引入用于Mac OS X WebKit组件为仪表板小部件和Safari浏览器等应用程序提供支持。后来它被Gecko内核的浏览器尤其是Mozilla FirefoxOpera和Chrome实现并被网页超文本应用技术工作小组提议为下一代的网络技术的标准元素HTML5新增元素。Canvas提供了非常多的JavaScript绘图API比如绘制路径、矩形、圆、文本和图像等方法与元素可以绘制各种2D图形。Canvas API 主要聚焦于 2D 图形。当然也可以使用元素对象的 WebGL API 来绘制 2D 和 3D 图形。
canvas优缺点
优点
Canvas提供的功能更原始适合像素处理动态渲染和数据量大的绘制如图片编辑、热力图、炫光尾迹特效等。Canvas非常适合图像密集型的游戏开发适合频繁重绘许多的对象。Canvas能够以 .png 或 .jpg 格式保存结果图像适合对图片进行像素级的处理。
缺点
在移动端可以能会因为Canvas数量多而导致内存占用超出了手机的承受能力导致浏览器崩溃。Canvas 绘图只能通过JavaScript脚本操作all in js。Canvas 是由一个个像素点构成的图形放大会使图形变得颗粒状和像素化导致模糊。
canvas初体验
canvas只有两个属性 width height 默认值分别为300px 150pxcanvas需要闭合标签如果结束标签不存在则文档的其余部分会被认为是替代内容将不会显示出来。替换内容当canvas不能正常渲染时会显示标签中的内容测试 canvas.getContext() 方法的存在可以检查浏览器是否支持Canvas 以下是一个简单模板
bodycanvas idtutorial width300 height300px你的浏览器不兼容Canvas,请升级您的浏览器!/canvasscriptwindow.onload function() {// 1.拿到canvas的元素对象let canvasEl document.getElementById(tutorial)// 2.判断浏览器是否兼容if(!canvasEl.getContext){return}// 3.拿到Canvas渲染的上下文// ctx: CanvasRenderingContext2D// ctx是一个绘图的上下文: 提供了绘图的指令, 可以绘制各种图形( 圆形 直线 椭圆... )let ctx canvasEl.getContext(2d) // 2d | webglconsole.log(ctx)}/script
/bodycanvas网格与坐标
假如HTML 模板中有个宽 150px, 高 150px 的 元素。元素默认被网格所覆盖。通常来说网格中的一个单元相当于 canvas 元素中的一像素。该网格的原点位于坐标 (0,0) 的左上角。所有元素都相对于该原点放置。 所以图中蓝色方形左上角的坐标为距离左边X 轴x 像素距离上边Y 轴y 像素坐标为x,y网格或坐标空间是可以变换的后面会讲如何将原点转换到不同的位置旋转网格甚至缩放它。注意移动了原点后默认所有后续变换都将基于新坐标系的变换。
绘制矩形
fillRect(x, y, width, height) 绘制一个填充的矩形strokeRect(x, y, width, height) 绘制一个矩形的边框clearRect(x, y, width, height) 清除指定矩形区域让清除部分完全透明。
scriptwindow.onload function() {let canvasEl document.getElementById(tutorial)if(!canvasEl.getContext){return}let ctx canvasEl.getContext(2d) // 2d | webgl// 1.绘制了一个填充的矩形ctx.fillRect(0, 0, 100, 50)// 2.绘制一个边框的矩形ctx.strokeRect(100, 100, 100, 50)// 3.清除指定矩形区域// ctx.clearRect(0,0, 100, 50)}/script认识路径
图形的基本元素是路径。路径是通过不同颜色和宽度的线段或曲线相连形成的不同形状的点的集合。一个路径甚至一个子路径都是闭合的。使用路径绘制图形需要一些额外的步骤。
首先你需要创建路径起始点。beginPath()然后你使用画图命令去画出路径。之后你把路径封闭。closePath()一旦路径生成你就能通过描边或填充路径区域来渲染图形。stroke()、fill()
beginPath() 新建一条路径生成之后图形绘制命令被指向到路径上生成路径。closePath() 闭合路径之后图形绘制命令又重新指向到上下文中。不是必须的stroke() 通过线条来绘制图形轮廓。fill() 通过填充路径的内容区域生成实心的图形。
注意 当前路径为空即调用 beginPath() 之后或者 canvas 刚建的时候第一条路径构造命令通常被视为是 moveTo无论实际上是什么。出于这个原因你几乎总是要在设置路径之后专门指定你的起始位置。 注意 当你调用 fill() 函数时所有没有闭合的形状都会自动闭合所以你不需要调用 closePath() 函数。但是调用 stroke() 时不会自动闭合。
移动触笔
一个非常有用的函数而这个函数实际上并不能画出任何东西也是上面所描述的路径列表的一部分这个函数就是moveTo()。或者你可以想象一下在纸上作业一支钢笔或者铅笔的笔尖从一个点到另一个点的移动过程。
moveTo(x, y) 将笔触移动到指定的坐标 x 以及 y 上。
线
lineTo(x, y) 绘制一条从当前位置到指定 x 以及 y 位置的直线。
绘制三角形
// 1.描边三角形ctx.beginPath()ctx.moveTo(50, 0)ctx.lineTo(100, 50)ctx.lineTo(50, 100)// ctx.closePath()ctx.stroke()// 2.实心的三角形ctx.beginPath()ctx.moveTo(150, 0)ctx.lineTo(200, 50)ctx.lineTo(150, 100)// ctx.closePath()ctx.fill() // 它会 自动闭合路径圆弧
arc(x, y, radius, startAngle, endAngle, anticlockwise) 画一个以x,y为圆心的以 radius 为半径的圆弧圆从 startAngle 开始到 endAngle 结束按照 anticlockwise 给定的方向默认为顺时针来生成。 注意 弧度(Math.PI/180)*角度 ctx.beginPath()ctx.arc(50, 50, 25, 0, Math.PI * 2, false)// 这里ctx.beginPath()也可以 两个圆不在一个路径中ctx.moveTo(175, 150)// 两个圆弧在同一路径中ctx.arc(150, 150, 25, 0, Math.PI)// ctx.closePath()ctx.stroke()矩形
直接在画布上绘制矩形的三个额外方法正如我们开始所见的绘制矩形同样也有 rect() 方法将一个矩形路径增加到当前路径上。
rect(x, y, width, height) 绘制一个左上角坐标为x,y宽高为 width 以及 height 的矩形。
当该方法执行的时候moveTo() 方法自动设置坐标参数0,0。也就是说当前笔触自动重置回默认坐标。
// 1.创建一个路径
ctx.beginPath()
// 2.绘图指令
// ctx.moveTo(0, 0)
ctx.rect(100, 100, 100, 50)
// 3.闭合路径
ctx.closePath()
// 4.填充和描边
ctx.stroke()
