Canvas画布
之前Web上的动画都是使用Flash实现的。比如动画,广告,游戏等等,基本上都是Flash实现的。
Flash是有缺点的,需要安装Adobe Flash Player, 漏洞多,重量大,卡顿不流程等。
Html5提出了一个新的canvas标签,彻底颠覆了Flash的主导地位。现在无论广告,动画,游戏都可以使用canvas实现了。Canvas是一个轻量级的画布,使用Canvas进行JS编程。
Canvas基本使用
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 | <body> <!-- canvas画布的宽高设置需要使用width= "500px" height= "400px" 属性,如果使用css会导致绘制内容变形 --> <canvas id= "canvasId" width= "500px" height= "400px" style= "background-color: antiquewhite;" > 低版本提示语,支持canvas标签的浏览器看不到 </canvas> <script> var canvas = document.getElementById( 'canvasId' ) // 获取2d画布 var ctx = canvas.getContext( '2d' ) // 设置填充色 ctx.fillStyle= 'red' // 填充一个矩形 ctx.fillRect(10,20,100,100) console.log(ctx); console.log(canvas); </script> </body> |
Canvas的像素化
使用canvas绘制的图形一旦绘制成功了,canvas就像素化了它们,canvas没有能力从画布上再次拿到这个图形,也就是说我们是没有方法去修改已经画到画布上的内容了。这也是canvas比较轻量级的原因,Flash则可以通过api对已经上画布的内容进行再次绘制。
如果想让这个canvas图形移动(被修改),必须按照清屏-更新-渲染的逻辑进行编程,简单说就是重新再画一次。<body>
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 | <canvas id= "myCanvasId" width= "500" height= "500" style= "background-color: antiquewhite;" > 请升级浏览器 </canvas> <script> var canvas = document.getElementById( 'myCanvasId' ) var ctx = canvas.getContext( '2d' ) ctx.fillStyle = 'blue' ctx.fillRect(100, 100, 100, 100) var left = 100 setInterval(() => { // 1.清屏 ctx.clearRect(0, 0, 500, 500) // 2.更新 left++ // 3.渲染 ctx.fillRect(left, 100, 100, 100) }, 10); </script> </body> |
Canvas动画
因为canvas不能修改已经绘制到屏幕的图像,所以我们要维护一组对象的状态和属性,通过对象生成对应的动画帧页面,在动画时将对象状态通过清屏-更新-绘制的流程进行更新页面。所以canvas采用的是面向对象编程的。
面向对象动画,定义一个类,里面维护着动画所需要的所有属性和状态,然后实例化多个对象,对应维护多个动画状态和属性。
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 | <body> <canvas id= "myCanvasId" width= "500" height= "500" style= "background-color: antiquewhite;" > 请升级浏览器 </canvas> <script> var canvas = document.getElementById( 'myCanvasId' ) var ctx = canvas.getContext( '2d' ) // 定义一个类 function Rect(x, y, w, h, color) { this .x = x this .y = y this .w = w this .h = h this .color = color } // 添加类方法 Rect.prototype.update = function () { this .x++; } Rect.prototype.render = function() { ctx.fillStyle= this .color ctx.fillRect( this .x, this .y, this .w, this .h) } // 实例化 var r1 = new Rect(10, 100, 100, 100, 'blue' ) var r2 = new Rect(10, 300, 100, 200, 'red' ) setInterval(() => { ctx.clearRect(0, 0, 500, 500) // 第一个对象 r1.update() r1.render() // 第二个对象 r2.update() r2.render() }, 10); </script> </body> |
Canvas绘制API
利用canvas可以绘制矩形填充,矩形边框,自定义路径等。
绘制路径的作用是为了设置一个不规则的多边形状态,路径是闭合的。使用路径绘制的步骤如下:
1.打开路径
2.设置路径起点
3.使用命令画出路径
4.封闭路径
5.填充或绘制已经封闭的路径
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 | <body> <canvas id= "myCanvasId" width= "500" height= "500" style= "background-color: antiquewhite;" > 请升级浏览器 </canvas> <script> var canvas = document.getElementById( 'myCanvasId' ) var ctx = canvas.getContext( '2d' ) console.log(ctx); // 画矩形填充 ctx.fillStyle= 'red' ctx.fillRect(50,100,100,100) // 画矩形框 ctx.strokeStyle= 'blue' ctx.strokeRect(200,100,100,100) // 画路径 // 1.打开路径 ctx.beginPath(); // 2.移动绘制点 ctx.moveTo(50, 400); // 3.描述行进路径 ctx.lineTo(100, 450); ctx.lineTo(200, 300); // 4.闭合路径 ctx.closePath(); // 5.绘制路径 // ctx.strokeStyle = 'brown' // ctx.stroke(); // 或 ctx.fillStyle = 'pink' ctx.fill(); // 画弧度 // 1.开启路径 ctx.beginPath() // 2.画圆弧 // 400, 400为起点, 50为半径, 0, 1为开始结束弧度(圆有2Pi个弧度约等于7个弧度), false为顺时针画; ctx.arc(400, 400, 50, 0, 1, false ); // 3.绘制路径 // ctx.closePath() // stroke()画实际路径,fill()会自动加colsePath()画出的是闭合路径。 ctx.strokeStyle= 'green' ctx.stroke() </script> </body> |
【推荐】编程新体验,更懂你的AI,立即体验豆包MarsCode编程助手
【推荐】凌霞软件回馈社区,博客园 & 1Panel & Halo 联合会员上线
【推荐】抖音旗下AI助手豆包,你的智能百科全书,全免费不限次数
【推荐】博客园社区专享云产品让利特惠,阿里云新客6.5折上折
【推荐】轻量又高性能的 SSH 工具 IShell:AI 加持,快人一步
· PowerShell开发游戏 · 打蜜蜂
· 在鹅厂做java开发是什么体验
· 百万级群聊的设计实践
· WPF到Web的无缝过渡:英雄联盟客户端的OpenSilver迁移实战
· 永远不要相信用户的输入:从 SQL 注入攻防看输入验证的重要性
2017-02-27 NSDateFormatter常见的使用方式
2017-02-27 iOS 创建一个在退出登录时可以销毁的单例