Canvas ，HTML 5中引入它，可以做很多事情：画图、动画、游戏开发等等。

Canvas 元素

Canvas 中文翻译为：画布。

<canvas id=”yourCanvasId” width=”300” height=”150” />

Canvas元素除了公用属性外，只有两个额外的属性：width, height,他们都是没有单位的，其实单位是px，但是不能写单位。如果不指定这两个属性，默认是width为300，height为150。

众所周知，html元素的样式，都可以用css样式来指定。Canvas也不例外。

<html>

    <head>

        <title>Canvas - 01</title>

        <style>

            body{

                background:#dddddd;

            }

            #canvas{

                margin:20px;

                padding:20px;

                background:#ffffff;

                border:thin inset #aaaaaa;

                width:600px;

                height:300px;

            }

        </style>

    </head>

    <body>

        <canvas id="canvas">

            Canvas not supported

        </canvas>

        <script type="text/javascript">

            var canvas = document.getElementById("canvas"),

                ctx = canvas.getContext("2d");

            ctx.font='38pt Arial';

            ctx.fillStyle='cornflowerblue';

            ctx.strokeStyle='blue';

            ctx.fillText("Hello Canvas", canvas.width/2 -150, canvas.height/2 + 15);

            ctx.strokeText("Hello Canvas stroke", canvas.width/2 -200, canvas.height/2 + 80);

        </script>

    </body>

</html>

我们期望的结果是这样的：

而实际的执行结果：

从执行结果看，它确实一个放大的hello，这是为什么呢？

其实我认为可以这样理解它，它是一个放映布，因为真正的绘图不在它上的，而是在一个绘图板上，绘图完毕投影到放映布上。这一点，类似于我们中学时候用过的幻灯片放映机，在一张玻璃板（绘图板）上写上习题，然后投影到放映布或者白墙上（画布）。

所以呢，这样一想，就明白了，当css样式中的width,height属性值与canvas元素的width,height的属性值不同时，会自动的将绘图板上的内容进行缩放到画布上。

Canvas 元素目前有三个方法：

通过getContext(“2d”);能够取得CanvasRenderingContext2D对象，然后就可以基于此上下文对象来作2d图了

通过getContext(“3d”);就可以进行3d作图，3d作图底层用的是WebGL。

在随后的文章里，将会学习使用Canvas画图的必要知识。

CanvasRenderingContext2D API 详情：

http://www.w3school.com.cn/jsref/dom_obj_canvasrenderingcontext2d.asp

https://developer.mozilla.org/en-US/docs/Web/API/CanvasRenderingContext2D

http://www.w3school.com.cn/tags/html_ref_canvas.asp

http://www.html5canvastutorials.com/tutorials/html5-canvas-line-joins/

高级教程：

包括event, arrow等理论基础 ：http://www.dbp-consulting.com/tutorials/canvas/

HTML5 Canvas：初始Canvas的更多相关文章

  1. 【微信小程序项目实践总结】30分钟从陌生到熟悉 web app 、native app、hybrid app比较 30分钟ES6从陌生到熟悉 【原创】浅谈内存泄露 HTML5 五子棋 - JS/Canvas 游戏 meta 详解，html5 meta 标签日常设置 C#中回滚TransactionScope的使用方法和原理

    [微信小程序项目实践总结]30分钟从陌生到熟悉 前言 我们之前对小程序做了基本学习: 1. 微信小程序开发07-列表页面怎么做 2. 微信小程序开发06-一个业务页面的完成 3. 微信小程序开发05- ...

  2. HTML5学习总结——canvas绘制象棋(canvas绘图)

    一.HTML5学习总结——canvas绘制象棋 1.第一次:canvas绘制象棋(笨方法)示例代码: <!DOCTYPE html> <html> <head> & ...

  3. HTML5中的 Canvas

    什么是Canvas? Canvas元素是HTML5的一部分,允许脚本语言动态渲染位图像.Canvas由一个可绘制地区HTML代码中的属性定义决定高度和宽度.JavaScript代码可以访问该地区,通过 ...

  4. HTML5中的canvas基本概念及绘图

    * Canvas(画布) * 基本内容 * 简单来说,HTML5提供的新元素<canvas> * Canvas在HTML页面提供画布的功能 * 在画布中绘制各种图形 * Canvas绘制的 ...

  5. 【javascript】html5中使用canvas编写头像上传截取功能

    [javascript]html5中使用canvas编写头像上传截取功能 本人对canvas很是喜欢,于是想仿照新浪微博头像上传功能(前端使用canvas) 本程序目前在谷歌浏览器和火狐浏览器测试可用 ...

  6. HTML5学习(四)---Canvas绘图

    参考教程地址:http://www.w3school.com.cn/html5/html_5_canvas.asp canvas 元素用于在网页上绘制图形. 什么是 Canvas? HTML5 的 c ...

  7. [html5] 学习笔记-Canvas应用

    通过使用HTML5游戏开发的引擎CreatJS,创建HTML5 Canvas上的更好交互. 1.认识CreateJS CreateJS是一个外部库,用它可以比Canvas更方便的绘制图形. 官网:ht ...

  8. [html5] 学习笔记-Canvas 绘制渐变图形与绘制变形图形

    在 HTML5 中,使用 Canvas API 绘制图形的知识,可以对绘制图形进行处理,包含使用 Canvas API 绘制渐变图形,使用 Canvas API 的坐标轴变换处理功能绘制变形图形.其中 ...

  9. [html5] 学习笔记-Canvas标签的使用

    Canvas通过JavaScript来绘制2D图形.Canvas是逐像素渲染的.在Canvas中,一旦图形被绘制完成,它就不会继续得到浏览器的关注.如果其位置发生变化,那么整个场景也需要重新绘制,包括 ...

随机推荐

  1. C#中静态和非静态的区别

    今天下午面试,HR问道:C#中静态类或静态方法和非静态类静态方法有什么区别?我回答是静态的可以直接调用而非静态的需要实例化.HR说这谁都知道,我问的是本质区别.我当时就郁闷了,我只有8个月的编程经验, ...

  2. 使用composer更新thinkphp5或则yii2的版本

    更新thinkphp5或则yii2的版本,我目前采用的是用composer去更新,小伙伴们如果有其他更好的办法更新,可以直接评论给我,不胜感激啊. 如果还没有安装 Composer ,你可以按 Com ...

  3. [转载] Hibernate与 MyBatis的比较

    转载自http://blog.csdn.net/firejuly/article/details/8190229 最近做了一个Hibernate与MyBatis的对比总结,希望大家指出不对之处. 第一 ...

  4. 自动化部署必备技能—部署yum仓库、定制rpm包

    部署yum仓库.定制rpm包 目录 第1章 扩展 - yum缓存 1.1 yum缓存使用步骤... 1 1.1.1 导言... 1 1.1.2 修改配置文件... 1 1.1.3 使用缓存... 1 ...

  5. 读lodash源码之从slice看稀疏数组与密集数组

    卑鄙是卑鄙者的通行证,高尚是高尚者的墓志铭. --北岛<回答> 看北岛就是从这两句诗开始的,高尚者已死,只剩卑鄙者在世间横行. 本文为读 lodash 源码的第一篇,后续文章会更新到这个仓 ...

  6. 使用Dropwizard(2)-配置分类ConfiguredBundle

    前言 不可避免的要用dropwizard作为service框架.持续学习.上次在dropwizard中使用feign,使用hystrix, 算是基本入门了.接下来就是基于此的优化. 把需要使用Conf ...

  7. Hi,腾讯WeTest联合Unity官方打造的性能分析工具UPA，今日全新发布！

    早在2016年ChinaJoy开始,WeTest曾受邀出席过Unity中国的线下性能场的活动,介绍我们的自动化框架和王者荣耀的故事.当时的活动很成功,期间我们收到了不少Unity开发者的好评,也为我们 ...

  8. Linux系列教程（二十四）——Linux的系统管理

    上篇博客介绍了Linux的服务管理,不管是以RPM包安装的服务,还是通过源码包安装的服务,万能启动服务的方法都可以通过 /绝对路径/启动脚本名 start .而通过 RPM 包安装的服务还可以通过 s ...

  9. 老男孩Python全栈开发（92天全）视频教程 自学笔记03

    day3课程目录: pyhton的历史 32bit和64bit系统的区别 Python版本的选择 第一个pyhton程序 文件后缀名及系统环境变量的介绍 pyhton程序的执行和其他编程语言的简单对比 ...

  10. Regasm

      程序集注册工具(Regasm.exe) 读取程序集中的元数据,并将所需的项添加到注册表中.注册表允许COM 客户程序以透明方式创建.NET Framework类.类一经注册,任何COM 客户程序都 ...