[js高手之路] html5 canvas系列教程 - 认识canvas以及基本使用方法
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
<script>
window.onload = function(){
var oCanvas = document.querySelector( "#cv" );
console.log( 'canvas的默认宽度与高度:' + '宽度:' + oCanvas.width + ',高度:' + oCanvas.height );
}
</script>
</head>
<body>
<canvas id="cv">你的浏览器不支持</canvas>
</body>
为什么要知道canvas的宽度与高度呢？ 因为在动画和绘图制作的过程中，经常需要重绘操作，而重绘操作需要获取canvas的宽度与高度.
注意：canvas的宽度与高度，只能通过行间属性或者js动态修改，不要通过样式去修改，否则获取到的宽度与高度不准
<style>
#cv {
width:600px;
height:400px;
}
</style>
<script>
window.onload = function(){
var oCanvas = document.querySelector( "#cv" );
console.log( 'canvas的默认宽度与高度:' + '宽度:' + oCanvas.width + ',高度:' + oCanvas.height );
}
</script>
通过样式修改canvas的宽度与高度分别为600px和400px,但是通过js通过获取到的却不是这个值，而是默认值。所以不要通过样式去修改，而应该通过设置行间属性或者js动态修改属性：
<script>
window.onload = function(){
var oCanvas = document.querySelector( "#cv" );
console.log( 'canvas的默认宽度与高度:' + '宽度:' + oCanvas.width + ',高度:' + oCanvas.height );
}
</script>
</head>
<body>
<canvas id="cv" width="600" height="400">你的浏览器不支持</canvas>
</body>
这样获取到的宽度与高度才是600px和400px.
canvas也可以通过js动态创建
<script>
window.onload = function () {
var oCanvas = document.querySelector("#cv");
console.log('canvas的默认宽度与高度:' + '宽度:' + oCanvas.width + ',高度:' + oCanvas.height);
}
</script>
</head>
<body>
<script>
;(function () {
var oCanvas = document.createElement("canvas");
oCanvas.setAttribute('id', 'cv');
oCanvas.width = '600';
oCanvas.height = '400'
document.body.appendChild(oCanvas);
})();
</script>
</body>
[js高手之路] html5 canvas系列教程 - 认识canvas以及基本使用方法的更多相关文章
- [js高手之路] html5 canvas系列教程 - 掌握画直线图形的常用API
我们接着上文[js高手之路] html5 canvase系列教程 - 认识canvas以及基本使用方法继续. 一.直线的绘制 cxt.moveTo( x1, y1 ): 将画笔移动到x1, y1这个点 ...
- [js高手之路] html5 canvas系列教程 - arcTo(弧度与二次,三次贝塞尔曲线以及在线工具)
之前,我写了一个arc函数的用法:[js高手之路] html5 canvas系列教程 - arc绘制曲线图形(曲线,弧线,圆形). arcTo: cxt.arcTo( cx, cy, x2, y2, ...
- [js高手之路] html5 canvas系列教程 - arc绘制曲线图形(曲线，弧线，圆形)
绘制曲线,经常会用到路径的知识,如果你对路径有疑问,可以参考我的这篇文章[js高手之路] html5 canvas系列教程 - 开始路径beginPath与关闭路径closePath详解. arc:画 ...
- [js高手之路] html5 canvas系列教程 - 图片操作(drawImage,clip,createPattern)
接着上文[js高手之路] html5 canvas系列教程 - 文本样式(strokeText,fillText,measureText,textAlign,textBaseline)继续,本文介绍的 ...
- [js高手之路] html5 canvas系列教程 - 文本样式(strokeText,fillText,measureText,textAlign,textBaseline)
接着上文线条样式[js高手之路] html5 canvas系列教程 - 线条样式(lineWidth,lineCap,lineJoin,setLineDash)继续. canvas提供两种输出文本的方 ...
- [js高手之路] html5 canvas系列教程 - 线条样式(lineWidth,lineCap,lineJoin,setLineDash)
上文,写完弧度与贝塞尔曲线[js高手之路] html5 canvas系列教程 - arcTo(弧度与二次,三次贝塞尔曲线以及在线工具),本文主要是关于线条的样式设置 lineWidth: 设置线条的宽 ...
- [js高手之路] html5 canvas系列教程 - 像素操作(反色,黑白,亮度,复古,蒙版,透明)
接着上文[js高手之路] html5 canvas系列教程 - 状态详解(save与restore),相信大家都应该玩过美颜功能,而我们今天要讲的就是canvas强大的像素处理能力,通过像素处理,实现 ...
- [js高手之路] html5 canvas系列教程 - 状态详解(save与restore)
本文内容与路径([js高手之路] html5 canvas系列教程 - 开始路径beginPath与关闭路径closePath详解)是canvas中比较重要的概念.掌握理解他们是做出复杂canvas动 ...
- [js高手之路] html5 canvas系列教程 - 线形渐变,径向渐变与阴影设置
接着上文[js高手之路] html5 canvas系列教程 - 像素操作(反色,黑白,亮度,复古,蒙版,透明)继续. 一.线形渐变 线形渐变指的是一条直线上发生的渐变. 用法: var linear ...
- [js高手之路] html5 canvas动画教程 - 实时获取鼠标的当前坐标
有了前面的canvas基础之后,现在开始就精彩了,后面写的canvas教程都是属于综合应用,前面已经写了常用的canvas基础知识,参考链接如下: [js高手之路] html5 canvas系列教程 ...
随机推荐
- Java基础二
1 关键字 定义:被java语言赋予了特殊含义的单词. 特点:关键字中的所有字母都为小写. 用于定义数据类型的关键字 class.interface.byte.short.int.long.float ...
- SpringMVC（二）--处理数据模型、ModelAndView、Model、Map、重定向、@ModelAttribute、
1.处理模型数据 Spring MVC 提供了以下几种途径输出模型数据: – ModelAndView:处理方法返回值类型为 ModelAndView 时, 方法体即可通过该对象添加模型数据 ...
- GBK和UTF8的区别
GBK的文字编码是双字节来表示的,即不论中.英文字符均使用双字节来表示,只不过为区分中文,将其最高位都定成1. UTF-8编码则是用以解决国际上字符的一种多字节编码,它对英文使用8位(即一个字节),中 ...
- sort与qsort的用法，建议使用sort
做ACM题的时候,排序是一种经常要用到的操作.如果每次都自己写个冒泡之类的O(n^2)排序,不但程序容易超时,而且浪费宝贵的比赛时间,还很有可能写错.STL里面有个sort函数,可以直接对数组排序,复 ...
- django下进行项目的部署
-------------------Django下进行对应的服务器配置1.服务器购买 本人在阿里云购买了一个服务器,操作系统为windows server2008/Linux(ubuntu) 2.服 ...
- MEF IOC使用
IOC介绍 IOC:控制反转,DI:依赖注入.按我的理解应该是一个东西.作用目前我看到的主要是解除各个层之间的强耦合,实现接口分离.MEF优点: 1.net4 自带,无需安装扩展(引用System.C ...
- positio:absolute与position:relative的区别
absolute 能让元素 inline-block 化:例如一个div标签默认宽度是100%显示的,但是一旦被absolute属性缠上,则100%默认宽度就会变成自适应内部元素的宽度. float ...
- NOPI读xls文件写到txt中(NPOI系列二)
private void button2_Click(object sender, EventArgs e) { StringBuilder sb = new StringBuilder(); //找 ...
- 八,ESP8266 文件保存数据
应该是LUA介绍8266的最后一篇,,,,,,下回是直接用SDK,,然后再列个12345.......不过要等一两个星期,先忙完朋友的事情 前面几篇 用AT指令版本的 一, http://www.c ...
- Spring mybatis源码篇章-XMLLanguageDriver解析sql包装为SqlSource
前言:通过阅读源码对实现机制进行了解有利于陶冶情操,承接前文Spring mybatis源码篇章-MybatisDAO文件解析(二) 首先了解下sql mapper的动态sql语法 具体的动态sql的 ...