[js高手之路] html5 canvas系列教程 - 认识canvas以及基本使用方法
2023-09-11 14:19:51 时间
canvas是html5中引入的一个新元素,俗称画布,既然是画布,当然是用来画图的。canvas技术指的是利用javascript操作canvas元素绘制图形的技术,要使用canvas,一定要浏览器支持canvas,谷歌和火狐的支持性很好,IE8不支持。你可以参考这个网站,查看canvas的支持性:http://www.caniuse.com/#search=canvas,当然他还能查询到css3和html5等很多web新潮技术在各浏览器的支持性.
如何使用canvas?
要使用canvas,一般都需要进行以下3步操作:
1,获取canvas对象( 通过选择器选择canvas元素 )
2,通过canvas获取他的上下文绘制环境( context )
3,结合javascript调用canvas的api进行图形绘制
认识canvas的属性:宽度与高度
canvas的默认宽度与高度:宽度:300,高度:150
1 <script> 2 window.onload = function(){ 3 var oCanvas = document.querySelector( "#cv" ); 4 console.log( 'canvas的默认宽度与高度:' + '宽度:' + oCanvas.width + ',高度:' + oCanvas.height ); 5 } 6 </script> 7 </head> 8 <body> 9 <canvas id="cv">你的浏览器不支持</canvas> 10 </body>
为什么要知道canvas的宽度与高度呢? 因为在动画和绘图制作的过程中,经常需要重绘操作,而重绘操作需要获取canvas的宽度与高度.
注意:canvas的宽度与高度,只能通过行间属性或者js动态修改,不要通过样式去修改,否则获取到的宽度与高度不准
1 <style> 2 #cv { 3 width:600px; 4 height:400px; 5 } 6 </style> 7 <script> 8 window.onload = function(){ 9 var oCanvas = document.querySelector( "#cv" ); 10 console.log( 'canvas的默认宽度与高度:' + '宽度:' + oCanvas.width + ',高度:' + oCanvas.height ); 11 } 12 </script>
通过样式修改canvas的宽度与高度分别为600px和400px,但是通过js通过获取到的却不是这个值,而是默认值。所以不要通过样式去修改,而应该通过设置行间属性或者js动态修改属性:
1 <script> 2 window.onload = function(){ 3 var oCanvas = document.querySelector( "#cv" ); 4 console.log( 'canvas的默认宽度与高度:' + '宽度:' + oCanvas.width + ',高度:' + oCanvas.height ); 5 } 6 </script> 7 </head> 8 <body> 9 <canvas id="cv" width="600" height="400">你的浏览器不支持</canvas> 10 </body>
这样获取到的宽度与高度才是600px和400px.
canvas也可以通过js动态创建
1 <script> 2 window.onload = function () { 3 var oCanvas = document.querySelector("#cv"); 4 console.log('canvas的默认宽度与高度:' + '宽度:' + oCanvas.width + ',高度:' + oCanvas.height); 5 } 6 </script> 7 </head> 8 <body> 9 <script> 10 ;(function () { 11 var oCanvas = document.createElement("canvas"); 12 oCanvas.setAttribute('id', 'cv'); 13 oCanvas.width = '600'; 14 oCanvas.height = '400' 15 document.body.appendChild(oCanvas); 16 })(); 17 </script> 18 </body>
相关文章
- java +selenuim使用js显示控件
- wepy - 与原生有什么不同(app.js和app.wpy比较)
- html table表格导出excel的方法 html5 table导出Excel HTML用JS导出Excel的五种方法 html中table导出Excel 前端开发 将table内容导出到excel HTML table导出到Excel中的解决办法 js实现table导出Excel,保留table样式
- 【微信小程序项目实践总结】30分钟从陌生到熟悉 web app 、native app、hybrid app比较 30分钟ES6从陌生到熟悉 【原创】浅谈内存泄露 HTML5 五子棋 - JS/Canvas 游戏 meta 详解,html5 meta 标签日常设置 C#中回滚TransactionScope的使用方法和原理
- js_html_input中autocomplete="off"在chrom中失效的解决办法 使用JS模拟锚点跳转 js如何获取url参数 C#模拟httpwebrequest请求_向服务器模拟cookie发送 实习期学到的技术(一) LinqPad的变量比较功能 ASP.NET EF 使用LinqPad 快速学习Linq
- 【JavaScript】js中Dom操作增删改查技巧大全(示例)
- js全局对象Math对象(数学运算) - 8种属性/20种方法与使用
- JS使用Cookie
- js中的方法调用
- js加载优化
- JS里的原始值与引用值
- 关于js计算非等宽字体宽度的方法
- JS中数组随机排序实现(原地算法sort/shuffle算法)
- js 进制转换
- js判断为空Null与字符串为空简写方法
- JS 事件绑定、事件监听、事件委托详细介绍
- JS获取当前时间戳的方法
- JS模式:jq中简单的模式--》采摘自js设计(tomxu_version)
- JS模式:策略模式,感觉就是一个闭包存储信息,然后是加一些验证方法--还看了老半天
- base.js,通用js方法,Js方法封装
- JS手写实现发布订阅设计模式
- JS手写实现深拷贝(考虑循环引用)
- iscroll.js的简单使用方法
- 让html页面不缓存js的实现方法
- JS 将数字字符串数组转为 数字数组 (互换),js获取数组对象中 某一个key的值,js判断一个数组是否包含另一个数组(一维数组)
- 几种解决JS数字精度丢失的方法
- [js高手之路]原型对象(prototype)与原型链相关属性与方法详解
- JS 在open打开的子窗口页面中调用父窗口页面的JS方法
- JS魔法堂:定义页面的Dispose方法——[before]unload事件启示录
- JS魔法堂:彻底理解0.1 + 0.2 === 0.30000000000000004的背后