HTML5 canvas准备知识
利用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准备知识的更多相关文章
- HTML5 Canvas基础知识
HTML5画布 1.创建一个画布 <canvas id="myCanvas" width="200" height="100&q ...
- HTML5 Canvas(基础知识)
最近笔者在学习HTML5的新元素<canvas>,会分享一些基础知识以及小例子,最终使用<canvas>实现一个绘制简单图表(条形图.线图或者饼图)的js库,会更新一到两篇文章 ...
- [HTML5 Canvas学习] 基础知识
HTML5 canvas元素通过脚本语言(通常是Javascript) 绘制图形, 它仅仅是一个绘图环境,需要通过getContext('2d')方法获得绘图环境对象,使用绘图环境对象在canvas元 ...
- HTML5 程序设计 - 使用HTML5 Canvas API
请你跟着本篇示例代码实现每个示例,30分钟后,你会高喊:“HTML5 Canvas?!在哥面前,那都不是事儿!” 呵呵.不要被滚动条吓到,很多都是代码和图片.我没有分开写,不过上面给大家提供了目录,方 ...
- 赠书:HTML5 Canvas 2d 编程必读的两本经典
赠书:HTML5 Canvas 2d 编程必读的两本经典 这两年多一直在和HTML5 Canvas 打交道,也带领团队开发了世界首款基于HTML5 Canvas 的演示文档工具---AxeSlide( ...
- 自己写的HTML5 Canvas + Javascript五子棋
看到一些曾经只会灌水的网友,在学习了前端之后,已经能写出下载量几千几万的脚本.样式,帮助大众,成为受欢迎的人,感觉满羡慕的.我也想学会前端技术,变得受欢迎呀.于是心血来潮,开始学习前端知识,并写下了这 ...
- 使用html5 canvas绘制圆形或弧线
注意:本文属于<html5 Canvas绘制图形入门详解>系列文章中的一部分.如果你是html5初学者,仅仅阅读本文,可能无法较深入的理解canvas,甚至无法顺畅地通读本文.请点击上述链 ...
- 7个惊艳的HTML5 Canvas动画效果及源码
HTML5非常强大,尤其是现在大部分浏览器都支持HTML5和CSS3,用HTML5制作的动画也多了起来.另外,Canvas上绘制图形非常简单,本文就分享了一些强大的HTML5 Cnavas动画,一起来 ...
- 使用 HTML5 canvas 绘制精美的图形
HTML5 是一个新兴标准,它正在以越来越快的速度替代久经考验的 HTML4.HTML5 是一个 W3C “工作草案” — 意味着它仍然处于开发阶段 — 它包含丰富的元素和属性,它们都支持现行的 HT ...
随机推荐
- CSS 浏览器默认样式
不要再说div天生就是block——这句话应该换成:浏览器默认样式天生规定了div是block——所以才导致了div是block!是默认样式规定的,不是浏览器的内核规定的. 没有设置block的元素, ...
- javascript——touch事件介绍与实例演示
分类: javascript2014-02-12 16:42 1742人阅读 评论(0) 收藏 举报 touch事件touchmovetouchstarttouchend 前言 诸如智能手机和平板 ...
- SVN(一次检出&二次检出)
一次检出: >进入经历文件夹 >输入svn checkout指令 >输入电脑密码 >输入用户名 >输入密码 >检出成功 第二次检出: >进入小涛文件夹 > ...
- Windows中进程的内存结构
基础知识: 栈是一种简单的数据结构,是一种只允许在其一端进行插入或删除的线性表.允许插入或删除操作的一端称为栈顶,另一端称为栈底,对栈的插入和删除操作被称为入栈和出栈. 有一组CPU指令可以实现对进程 ...
- Android dialog 不消失
最近在做Android4.0的开发,发现AlertDialog相比较以前有了较大变化,就是在触摸对话框边缘外部,对话框消失 于是研究其父类发现,可以设置这么一条属性,当然必须先AlertDialog. ...
- Android 开源控件系列_2
FileBrowserView 一个强大的文件选择控件.界面比较漂亮,使用也很简单.特点:可以自定义UI:支持复制.剪切.删除.移动文件:可以用在Fragment.ativity.DialogFrag ...
- python-md5加密
python实现:md5_hash.py #-*- coding: UTF-8 -*- ' __date__ = '2016/4/11' from Tkinter import * import ha ...
- windows程序设计读书笔记3——字符显示2
由于显示的字符可能会不全,我们很容易想到的一个解决办法是使用滚动条. 先看一下代码,再进行分析: /*------------------------------------------------- ...
- MySQL的用户密码过期功能详解
MySQL的用户密码过期功能详解 作者:chszs,未经博主允许不得转载.经许可的转载需注明作者和博客主页:http://blog.csdn.net/chszs 先说明两个术语. Payment Ca ...
- 可爱的 Python : Python中函数式编程,第二部分
英文原文:Charming Python: Functional programming in Python, Part 2,翻译:开源中国 摘要: 本专栏继续让David对Python中的函数式编 ...