canvas初探1
1.canvas的历史
首先，它是HTML5的一个标签。
它是为了客户端矢量图形而设计的，它没有自己的行为，它将一个绘图API展现给Javascript，使脚本能够把想绘制的东西都绘制到一块画布上。
其次，它是在Apple的Safari 1.3版本的浏览器中被引用。随后Firefox 1.5和Opera 9也支持了<canvas>标签。之后IE也可以使用<canvas>标签，但是要在IE的VML支持的基础上使用开源的Javascript代码来构建兼容性的画布。参考http://excanvas.sourceforge.net/。
最后，由浏览器厂商非正式协会的推动，使<canvas>标签成为了HTML5草案中一个正式的标签。
2.canvas元素
2.1 canvas元素的方法和属性
canvas的属性
| 属性 | 描述 | 类型 | 取值范围 | 默认值 |
| width | canvas元素绘图表面的宽度。在默认状态下，浏览器会将canvas元素的大小设定成与绘图表面大小一致。然而，如果在CSS中覆盖了元素大小，那么浏览器则会将绘图表面进行缩放，使之符合元素尺寸。 | 非负整数 | 在有效范围内的任意非负整数。数值开头可以添加“+”或空格，但是按照规则，不能给数值加px后缀 | 300 |
| height | canvas元素绘图表面的高度。具体参照对width属性的描述 | 非负整数 | 在有效范围内的任意非负整数。数值开头可以添加“+”或空格，但是按照规则，不能给数值加px后缀 | 300 |
canvas的方法
| 属性 | 描述 |
| getContext() | 返回与该canvas元素相关的绘图环境 |
| toDataURL(type,quality) | 返回一个数据地址，你可以将其设置为img元素的src属性值。第一个参数指定了图像的类型，例如image/jpeg或image/png。第一参数默认image/png。第二参数必须是0~1.0之间的double值，它表示JPEG图像显示质量 |
| toBlob(callback,type,args…) | 创建一个用于此canvas元素图像文件的Blob。第一个参数是一个回调函数，浏览器会以一个指向blob的引用为参数，去调用该回调函数。第二个参数以”image/png”这样的形式指定图像类型。最后一个参数介于是0~1.0之间值，表示JPEG图像的质量。将来也会加入其他一些用于精确调控图像属性的参数 |
讨论：有关canvas元素大小与绘图表面的大小
通过一个简单的例子说明下，如下图所示，是利用canvas达到的效果。
var canvas = document.getElementById("canvas");
context=canvas.getContext("2d");
context.font = "38pt Arial";
context.fillStyle = "cornflowerblue";
context.strokeStyle = "blue";
context.fillText("Hello Canvas",canvas.width/2 - 150,canvas.height/2 + 15);
context.strokeText("Hello Canvas",canvas.width/2 -150,canvas.height/2 + 15);
Example1-1
<!DOCTYPE html>
<html>
<head lang="en">
<meta charset="UTF-8">
<title>Example1-1</title>
<style>
body{
background: #ddd;
}
#canvas{
margin: 10px;
padding: 10px;
background:#fff;
border: thin inset #aaa;
}
</style>
</head>
<body>
<canvas id="canvas" width="600" height="300">Canvas not supported</canvas>
<script src="Example1-1.js"></script>
</body>
</html>
HTML代码
下面是通过CSS来设定canvas的大小，效果图如下。
<!DOCTYPE html>
<html>
<head lang="en">
<meta charset="UTF-8">
<title>Example1-1</title>
<style>
body{
background: #ddd;
}
#canvas{
margin: 10px;
padding: 10px;
background:#fff;
border: thin inset #aaa;
width :600px;
height: 300px;
}
</style>
</head>
<body>
<canvas id="canvas">Canvas not supported</canvas>
<script src="Example1-1.js"></script>
</body>
</html>
HTML代码
可以看出，元素的大小有明显的改变。
canvas实际上有两套尺寸，一个是元素本身的大小，还有一个是元素绘图表面的大小。
当设置元素的width与height属性时，实际上同时也修改了该元素本身的大小和绘图表面的大小。
当通过CSS设置元素大小时，只会改变元素本身的大小，而不会影响到绘图表面。
默认情况下，canvas元素和其绘图表面的大小时300px*300px。而使用CSS设置后，元素大小增加为600px*300px。绘图表面大小依然是300px*300px。这时浏览器就会对其进行缩放，使其符合元素的大小。当然就出现了上面第二张图所示的情况。
canvas初探1的更多相关文章
- canvas初探3：画方画圆
绘制矩形的方法,strokeRect().fillRect()及clearRect(). 方法 描述 strokeRect(double x,double y,double w,double h) 使 ...
- canvas初探2
2.2 canvas的绘图环境 canvas仅仅只是一个绘图的容器,其内存在一个绘图环境,该环境对象提供了全部的绘图功能. 目前canvas的绘图环境是2d,但canvas规范在着手准备支持其他类型的 ...
- HTML5 Canvas 初探
仅仅只是一个简单的hello world. js代码很简单: <!DOCTYPE HTML> <html lang="cn"> <head> & ...
- Web基础 HTML CSS JS JQuery AJAX
1. Web基础 网页的骨骼HTML 什么是HTML超文本标记语言:Hyper Text Markup Language 这都不重要,重要的是:HTML是Web网页的基本组成部分HTML中定义的元素, ...
- 初探canvas
canvas是html5新增的一个专用于图形处理的标签,利用canvas可以实现大部分图形操作canvas的一些基本操作与其他图形编程工具类似,包含:各种形状的边框.路径绘制和填充,画布属性调整,样式 ...
- Canvas标签初探
学了一点基础知识,感觉好神奇,全部练习代码 <html> <head> <meta http-equiv=Content-Type content="text/ ...
- 初探Javascript之Canvas
什么是Canvas <canvas>是 HTML5 新增的元素,可使用JavaScript脚本来绘制图形. canvas是一个矩形区域,您可以控制其每一像素. 引入Canvas ```ht ...
- ReactNative学习实践--动画初探之加载动画
学习和实践react已经有一段时间了,在经历了从最初的彷徨到解决痛点时的兴奋,再到不断实践后遭遇问题时的苦闷,确实被这一种新的思维方式和开发模式所折服,react不是万能的,在很多场景下滥用反而会适得 ...
- Android中滑屏初探 ---- scrollTo 以及 scrollBy方法使用说明
今天给大家介绍下Android中滑屏功能的一个基本实现过程以及原理初探,最后给大家重点讲解View视图中scrollTo 与 scrollBy这两个函数的区别 . 首先 ,我们必须明白在Android ...
随机推荐
- DOM对象—选中执行效果
---恢复内容开始--- 例如我们注册时,一些法律条例,我们是否同意决定着能否注册.在选择同意或不同意时出现的效果. 先在body里做一个按钮和选项框. <input type="ch ...
- PHP反射API
近期忙着写项目,没有学习什么特别新的东西,所以好长时间没有更新博客.我们的项目用的是lumen,是基于laravel的一个轻量级框架,我看到里面用到了一些反射API机制来帮助动态加载需要的类.判断方法 ...
- python 新手遇到的问题
作为新手,我把之前遇到的问题贴出来 错误提示1: TypeError: unbound method a() must be called with A instance as first argum ...
- EXT.JS的PROXY放在哪里，STORE放在哪里，绝对是个技术活儿啊。
我理解的是,单独的STORE,会在应用程序开始时就加载, 而VIEWMODEL的STORE,会在VIEW加载时才开始加载. PROXY放在STORE,则会在调用这个STORE的VIEW才能请求服务器数 ...
- 浅谈WEB前后端分离
重审业务逻辑 用过MVC的童鞋都知道业务逻辑(Bussiness Logic),但是大多对这概念又是模棱两可,业务逻辑从来都是这样难以理解,谈论前后端分离之前这个概念非常有必要探讨一下! 在简单的CR ...
- C# 通过反射获取扩展方法
注意,扩展方法本质上是静态方法,所以拿到MethodInfo时,应该这么调用 methodInfo.Invoke(null, new object[]{params}) static IEnumera ...
- 怎样用conda安装opencv
首先用Anaconda是因为方便(管理方便,包安装真心不方便).下面是我的安装过程: 首先使用如下命令安装opencv conda install -c https://conda.binstar.o ...
- 10gRAC vip启动报错CRS-1006 CRS-0215
为测试一个迁移方案,装了一套10g rac环境,可能是很久没有装过10g的RAC了,整个过程情况不断. 1.在把集群软件和数据库软件都装好之后,用crs_stat检测状态的时候,发现vip的状态不对, ...
- fragment嵌套问题
fragment嵌套里面不能用再用getActivity().getFragmentManager()要用getChildFragmentManager()
- 在安装AndroidStudio时产生的问题
JDK安装完毕,环境变量也配置完了,AndroidStudio安装完了,其中SDK使用了自己下载好的包. 但是第一次打开AndroidStudio的时候出现了错误: java.lang.Runtime ...