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的更多相关文章

  1. canvas初探3：画方画圆

    绘制矩形的方法,strokeRect().fillRect()及clearRect(). 方法 描述 strokeRect(double x,double y,double w,double h) 使 ...

  2. canvas初探2

    2.2 canvas的绘图环境 canvas仅仅只是一个绘图的容器,其内存在一个绘图环境,该环境对象提供了全部的绘图功能. 目前canvas的绘图环境是2d,但canvas规范在着手准备支持其他类型的 ...

  3. HTML5 Canvas 初探

    仅仅只是一个简单的hello world. js代码很简单: <!DOCTYPE HTML> <html lang="cn"> <head> & ...

  4. Web基础 HTML CSS JS JQuery AJAX

    1. Web基础 网页的骨骼HTML 什么是HTML超文本标记语言:Hyper Text Markup Language 这都不重要,重要的是:HTML是Web网页的基本组成部分HTML中定义的元素, ...

  5. 初探canvas

    canvas是html5新增的一个专用于图形处理的标签,利用canvas可以实现大部分图形操作canvas的一些基本操作与其他图形编程工具类似,包含:各种形状的边框.路径绘制和填充,画布属性调整,样式 ...

  6. Canvas标签初探

    学了一点基础知识,感觉好神奇,全部练习代码 <html> <head> <meta http-equiv=Content-Type content="text/ ...

  7. 初探Javascript之Canvas

    什么是Canvas <canvas>是 HTML5 新增的元素,可使用JavaScript脚本来绘制图形. canvas是一个矩形区域,您可以控制其每一像素. 引入Canvas ```ht ...

  8. ReactNative学习实践--动画初探之加载动画

    学习和实践react已经有一段时间了,在经历了从最初的彷徨到解决痛点时的兴奋,再到不断实践后遭遇问题时的苦闷,确实被这一种新的思维方式和开发模式所折服,react不是万能的,在很多场景下滥用反而会适得 ...

  9. Android中滑屏初探 ---- scrollTo 以及 scrollBy方法使用说明

    今天给大家介绍下Android中滑屏功能的一个基本实现过程以及原理初探,最后给大家重点讲解View视图中scrollTo 与 scrollBy这两个函数的区别 . 首先 ,我们必须明白在Android ...

随机推荐

  1. ASP.NET获取客户端IP地址

    public static string GetRealIP()        {            string ip;            try            {          ...

  2. java模拟浏览器上传文件

    public static void main(String[] args) { String str = uploadFile("C:/Users/RGKY/Desktop/wKgBHVb ...

  3. Riemann映射定理

    单复变函数几何理论最高的成就我想应该属于Riemann映射定理吧! Riemann映射定理:$\mathbb C$中任意边界多余一个点的单连通域$D$都与单位圆盘$B(0,1)$等价,即存在着$D$上 ...

  4. 第六课 touch事件

    1.移动端页面在PC上浏览时,限制宽度的方法: 2.移动端页面切换设备时自动刷新页面的方法: 3.touch事件 touchstart:当手指触摸屏幕时触发.通过addEventListener添加移 ...

  5. 自己搭建了一个简单实用的Web版记事本

    演示播放地址:http://v.youku.com/v_show/id_XMTg0MjY2OTAxNg==.html 技术说明 环境 vs2012开发 sql2008r2数据库 技术 C#基础语言 M ...

  6. Python 学习拾遗

    该博文主要适应于python2.7,并没有对py3进行测试. 主要记录学习python过程中容易出现的一些小问题.小错误,相信能给你启发. 1.剔除一个字符串中的所有空格(假设该字符串是s) &quo ...

  7. react-native 踩坑记

    最近在使用react-native的时候遇到了很多坑,这里给大家分享下 一.样式 react-native 虽然支持flex布局,但是所有的样式均是css样式的一个很小的集合,尤其是在安卓机下问题尤为 ...

  8. 使用 CommandLineApplication 类创建专业的控制台程序

    闲话 在很久很久以前,电脑是命令行/终端/控制台的天下,那屏幕上的光标在行云流水般的键盘敲击下欢快地飞跃着,那一行行的字符输出唰唰唰地滚动着--直到 Windows 95 的出现(那时候我还不知道苹果 ...

  9. 深入理解Java：SimpleDateFormat安全的时间格式化

    这一篇我什么都不写,只推荐一篇大牛的博客,这篇博客给了我很多灵感,让我对多线程理解的更加透彻了; http://www.cnblogs.com/chenying99/articles/3331950. ...

  10. 安装 pywin32-218.win32-py2.7.exe 报错python version 2.7 required,which was not found in the registry解决方案

    随便在一个盘下 新建register.py的文件,内容如下: #   # script to register Python 2.0 or later for use with win32all    ...