一、画布的默认宽高

  <canvas id="myCanvas" style="border:1px solid black;">
    你的浏览器不支持html5
  </canvas>

  通过火狐浏览器访问,看到

  

  通过截图工具发现,矩形的宽为300 高为150。但是我在w3school中看到的信息室说canvas默认宽高都为300

  

  不过不是我要讨论的东西,可先忽略。

  我们知道canvas只是html的一个新标签。因此,我们也可以用css来修改canvas画布的宽高大小。

  但是,除非特殊情况,一定不要用css来定义Canvas的宽高。

  两者的区别,在于:

  Canvas自身的宽高就是画布本身的属性,而css给他的宽高则可以看作是缩放.

  代码例子:

  

  这是通过js来设置画布canvas的宽高,在保持文本设置不变的情况下,修改width以及height,会发现,文本处于不变的状态。

  

  这是通过css来设置画布canvas的宽高,在保持文本设置不变的情况下,修改width以及height,会发现,文本会随着设置而变化,而且有了缩放的感觉。

  

  二、canvas画布只能共享一支画笔

  在前面已经提到,在有了画布的情况下,我们要对画布进行操作,则需要画笔来进行。

  canvas获取画笔 var ctx = c.getContext("2d");

  我刚开始的时候,认为反正getContext只是方法。所以多调用几次,就可以整出多几只笔出来。比如:

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

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

  后来通过浏览器访问时,oh my god。不行啊。

  代码例子:

  

  运行结果图:

  

  从这里,我们就可以知道,canvas只能共享一支画笔。如果你需要画出不同的颜色,办法就是把这只唯一的“笔”不停的蘸上新颜色哦。^_^

  三、路径问题即beginPath方法使用

  在进行线条或者图形绘制时,最好在开头开始beginPath

  在学习canvas的线条或者矩形线条的使用时,我感到奇怪的是,有些案例,每画一条线条,在开始时都会使用beginPath作为开头,而有些案例,则没有。真够坑的。

看了手册的解释说是,开启一条新的路径。那么它有什么重要的?

  代码例子:

  

  访问结果图:

  

  从结果图,可以看出

  1、结果不是一红 一黄。

  2、第一条线条被描绘了两次。

  如何理解这个结果.

  我的理解是,我用手在画板上,用一支红色的笔画出一线条。然后,用一支黄色的笔再画出另一线条。那么,为什么我不会对第一条再次绘制呢?这是因为我知道,这两条线条是不同的。因此,我不会。而计算机不知道,它无法区别这两条线条是不是同一的。而要如何进行区别呢?就要用到beginPath。否则的话,canvas中的绘制方法,都会以“上一次beginPath”之后的所有路径为基础进行绘制了。

  启用beginPath也有个好处,就是提高性能。否则,就会对之前的线条进行重新绘制了。

  

HTML5 canvas易错点的更多相关文章

  1. HTML5 canvas入门

    HTML5 Canvas入门 <canvas> 标签定义图形,比如图表和其他图像,您必须使用脚本来绘制图形.在画布上(Canvas)画一个红色矩形,渐变矩形,彩色矩形,和一些彩色的文字. ...

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

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

  3. 如何开发一个简单的HTML5 Canvas 小游戏

    原文:How to make a simple HTML5 Canvas game 想要快速上手HTML5 Canvas小游戏开发?下面通过一个例子来进行手把手教学.(如果你怀疑我的资历, A Wiz ...

  4. html5 canvas简易版捕鱼达人游戏源码

    插件描述:html5利用canvas写的一个js版本的捕鱼,有积分统计,鱼可以全方位移动,炮会跟着鼠标移动,第一次打开需要鼠标移出背景图,再移入的时候就可以控制炮的转动,因为是用的mouseover触 ...

  5. 使用html5 canvas绘制图片

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

  6. HTML5 Canvas 获取网页的像素值。

    我之前在网上看过一个插件叫做出JScolor   颜色拾取器  说白了就是通过1*1PX的DOM设置颜色值通过JS来获取当前鼠标点击位置DOM的颜色值. 自从HTML5 画布出来之后.就有更好的方法来 ...

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

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

  8. html5 canvas常用api总结(一)

    1.监听浏览器加载事件. window.addEventListener("load",eventWindowLoaded,false); load事件在html页面加载结束时发生 ...

  9. JavaScript易错知识点整理

    前言 本文是我学习JavaScript过程中收集与整理的一些易错知识点,将分别从变量作用域,类型比较,this指向,函数参数,闭包问题及对象拷贝与赋值这6个方面进行由浅入深的介绍和讲解,其中也涉及了一 ...

随机推荐

  1. "margin塌陷现象"div盒子嵌套盒子外边距合并现象

    问题描述:原型大概是“一个div嵌套了两个 div,给main设定了background="pink" ,header1设定background=“red” .header2 设定 ...

  2. Hadoop 安装 (4) SSH无密码验证配置

    验证SSH 和 RSYNC 已经安装好了 Master 生成密码对以及对于 Slave 的无密码登录. 见:http://www.cnblogs.com/xia520pi/archive/2012/0 ...

  3. C# 知识点回顾

    一.基础知识 1.主函数:主函数是程序运行的入口. 2.数据类型: 值类型:整形(有符号.无符号)浮点型(float.double.decimal) 字符型(char.datetime) 结构体(范例 ...

  4. 几种画直线的方法-孙鑫C++笔记

    // HDC画直线 CPoint m_ptOrigin ; void CDrawView::OnLButtonDown(UINT nFlags, CPoint point) { m_ptOrigin ...

  5. Qt编程学习网站

    http://blog.csdn.net/k122769836/article/details/8637677 QT - little_su - 博客频道 - CSDN.NET Qt - 1+1=2 ...

  6. 当tomcat有两个链接数据库的应用同时运行可能冲突

    -Xms512M   -Xmx1024M -XX:MaxPermSize=256M

  7. java如何防止反编译

    综述(写在前面的废话) Java从诞生以来,其基因就是开放精神,也正因此,其可以得到广泛爱好者的支持和奉献,最终很快发展壮大,以至于有今天之风光!但随着java的应用领域越来越广,特别是一些功能要发布 ...

  8. Python之路第五天,基础(5)-序列化和字符串格式化

    序列化 Python中用于序列化的两个模块 json 用于『字符串』和『python基本数据类型』间进行转换 pickle 用于『python特有的类型』和『python基本数据类型』间进行转换 js ...

  9. python-base64编码与解码

    base64编码原理: 例如: 实例一: #-*- coding: UTF-8 -*- ' __date__ = '2015/12/23' import base64 code = "aGV ...

  10. linux 驱动模块 内核编译环境

    目录(?)[+] Linux设备驱动Hello World程序介绍 如何编写一个简单的linux内核模块和设备驱动程序.我将学习到如何在内核模式下以三种不同的方式来打印hello world,这三种方 ...