利用canvas来进行画图工作。因此,我们有必要进行一些画图方面的术语说明.

  一、画布

  在日常生活中,如果我们要画画,可以找纸、板、画布等等工具。而在网页元素中,我们只需要定义一个标签即可。

<canvas id="c" style="border:1px solid black;"><p>your browser is not support.</p></canvas>

  其中,canvas就是一块画布,而标签里面的p,则是为兼容低版本浏览器而使用。如果,你在访问该页面能够看到p标签里面的内容,则说明,你当前使用的浏览器还不支持html5;相反,则是看到矩形。

  使用画布的方法:

var c = document.getElementById("c");

  二、画笔

  在有了画布之后,如果我们想要往其中涂鸦,则需要"画笔"这样的工具。

  利用canvas来获取画笔的方法:

var ctx = c.getContext("2d");

  其中getContext方法就是用来拿笔的,但这里还有个参数:2d.其为默认传递的参数值。这是什么意思呢?这个可以看作是画笔的种类。

  既然有2d,那么就会有3d了?以后估计会有,但现在没有。所以我们先用这只2d的笔。

  三、橡皮

  在画布,如果发现有些地方的内容需要去除的话,我们可以使用"橡皮"来进行操作。

  利用canvas来使用橡皮的方法:

ctx.clearRect(X1,Y1,X2,Y2);

  四、坐标 

  2d世界,就是平面,在一个平面上确定一个点,需要两个值,x坐标和y坐标。这是一个很重要的基础概念。

  canvas的原点是左上角,跟网页的定位是一致的。

  五、路径

  利用坐标点,成线。由线成面

HTML5 canvas准备知识的更多相关文章

  1. HTML5 Canvas基础知识

    HTML5画布 1.创建一个画布         <canvas id="myCanvas" width="200" height="100&q ...

  2. HTML5 Canvas(基础知识)

    最近笔者在学习HTML5的新元素<canvas>,会分享一些基础知识以及小例子,最终使用<canvas>实现一个绘制简单图表(条形图.线图或者饼图)的js库,会更新一到两篇文章 ...

  3. [HTML5 Canvas学习] 基础知识

    HTML5 canvas元素通过脚本语言(通常是Javascript) 绘制图形, 它仅仅是一个绘图环境,需要通过getContext('2d')方法获得绘图环境对象,使用绘图环境对象在canvas元 ...

  4. HTML5 程序设计 - 使用HTML5 Canvas API

    请你跟着本篇示例代码实现每个示例,30分钟后,你会高喊:“HTML5 Canvas?!在哥面前,那都不是事儿!” 呵呵.不要被滚动条吓到,很多都是代码和图片.我没有分开写,不过上面给大家提供了目录,方 ...

  5. 赠书:HTML5 Canvas 2d 编程必读的两本经典

    赠书:HTML5 Canvas 2d 编程必读的两本经典 这两年多一直在和HTML5 Canvas 打交道,也带领团队开发了世界首款基于HTML5 Canvas 的演示文档工具---AxeSlide( ...

  6. 自己写的HTML5 Canvas + Javascript五子棋

    看到一些曾经只会灌水的网友,在学习了前端之后,已经能写出下载量几千几万的脚本.样式,帮助大众,成为受欢迎的人,感觉满羡慕的.我也想学会前端技术,变得受欢迎呀.于是心血来潮,开始学习前端知识,并写下了这 ...

  7. 使用html5 canvas绘制圆形或弧线

    注意:本文属于<html5 Canvas绘制图形入门详解>系列文章中的一部分.如果你是html5初学者,仅仅阅读本文,可能无法较深入的理解canvas,甚至无法顺畅地通读本文.请点击上述链 ...

  8. 7个惊艳的HTML5 Canvas动画效果及源码

    HTML5非常强大,尤其是现在大部分浏览器都支持HTML5和CSS3,用HTML5制作的动画也多了起来.另外,Canvas上绘制图形非常简单,本文就分享了一些强大的HTML5 Cnavas动画,一起来 ...

  9. 使用 HTML5 canvas 绘制精美的图形

    HTML5 是一个新兴标准,它正在以越来越快的速度替代久经考验的 HTML4.HTML5 是一个 W3C “工作草案” — 意味着它仍然处于开发阶段 — 它包含丰富的元素和属性,它们都支持现行的 HT ...

随机推荐

  1. js简易写法

    我写JavaScript代码已经很久了,都记不起是什么年代开始的了.对于JavaScript这种语言近几年所取得的成就,我感到非常的兴奋:我很幸运也是这些成就的获益者.我写了不少的文章,章节,还有一本 ...

  2. css 实现评分效果

    css实现评分效果,其实是css sprites (css精灵)的延伸应用,效果的实现主要是由  background-position 属性移动图片位置.之前看到有前辈写过关于这方面的内容,在理解上 ...

  3. UVA 1153 KEEP THE CUSTOMER SATISFIED

    题意: 钢铁公司有N个客户的订单,每个订单有一个产量q(生产时间刚好也等于q)和订单完成截止时间.公司要求完成尽量多的订单. 分析: 先按截止时间d排序,然后维护一个已经选好的订单的优先队列,如果当前 ...

  4. javascript 手机号抽奖

     案例   ----           手机号抽奖   开始抽奖  停止                                                       *具体的备注在代 ...

  5. ubuntu14.04中mysql的安裝及utf8编码集配置

    mysql的安裝使用sudo apt-get install mysql-server即可安裝,我安裝的是5.6版.安装过程中会要求输入root账户的密码,按提示输入即可. Mysql Workben ...

  6. fragment之间的信息交互——onActivityResult()不经过Activity

    1.本文讲述如何fragment与fragment之间互传信息,不用使用Activity的onActivityResult()方法 核心思想:FirstFragment获取到SecondFragmen ...

  7. [Python] 应用kNN算法预测豆瓣电影用户的性别

    应用kNN算法预测豆瓣电影用户的性别 摘要 本文认为不同性别的人偏好的电影类型会有所不同,因此进行了此实验.利用较为活跃的274位豆瓣用户最近观看的100部电影,对其类型进行统计,以得到的37种电影类 ...

  8. 分支-15. 日K蜡烛图

    /* * Main.c * 分支-15. 日K蜡烛图 * Created on: 2014年6月18日 * Author: Boomkeeper ****测试通过***** */ #include & ...

  9. Spring 3.x企业实用开发实战(1)

    有关Spring的介绍这里就不赘述了,主要是学习了陈雄华版的<Spring 3.x企业应用开发实战>并做了一点笔记,以助于后期的回顾和复习. 废话不多说,直接进入主题,以下所有代码基于&l ...

  10. at java.util.concurrent.ConcurrentHashMap.hash(ConcurrentHashMap.java:333)

    at java.util.concurrent.ConcurrentHashMap.hash(ConcurrentHashMap.java:333) 原因: null request