canvas学习笔记（一）-认识canvas
canvas是html5新增的一个标签，主要用于图形的绘制。我们可以把它理解为是浏览器给我们提供了一个画板，至于要绘制怎样的画卷，就看神笔马良你的主意了。而在canvas上绘制图形使用的笔，就是js了。
使用canvas绘图大致分为如下几个步骤
1.创建一个canvas标签，指定id、width、height属性
[html]
<canvas id=’firstCanvas’ width=’400′ height=’300′>不支持canvas标签</canvas>
[/html]
2.获取canvas对象
跟获取其他dome对象一样，可以使用dome对象获取的方式获取canvas对象
[javascript]
var canvas = document.getElementById(‘firstCanvas’);
[/javascript]
3.获取上下文
[javascript]
var context = canvas.getContext(’2d’);
[/javascript]
目前只有2d模式
4.设置画笔的样式
画笔的样式比较丰富，如设置填充的颜色
[javascript]
context.fillStyle = "#EEEEFF";
[/javascript]
5.绘制图形
canvas也提供了很多图形绘制的api，如填充一个矩形框
[javascript]
context.fillRect(50,50,100,100);
[/javascript]
下面我们利用以上步骤，绘制一些简单的图形
[html]
<!DOCTYPE html>
<html>
<head>
<title>canvas01</title>
<meta charset="UTF-8" />
<script type="text/javascript">
function draw(id) {
//步骤二：获取canvas对象
var canvas = $(id);
if (null == canvas) {
return;
}//步骤二END
//步骤三：获取上下文
var context = canvas.getContext(’2d’);
//步骤三END
//步骤四：设置画笔样式
context.fillStyle = "#EEEEFF";
//步骤四END
//步骤五：绘制图形
context.fillRect(0, 0, 400, 300);
//步骤五END
//以下是重复步骤四-步骤五
context.fillStyle = ‘red’;
context.lineWidth = 1;
context.fillRect(50, 50, 100, 100);
context.strokeStyle = ‘blue’;
context.strokeRect(50, 50, 100, 100);
}
function $(id) {
return document.getElementById(id);
}
</script>
</head>
<body>
<!– 步骤一：创建canvas标签 –>
<canvas id="canvas01" width="400" height="300">
浏览器不支持canvas标签
</canvas>
</body>
</html>
[/html]
更多学习资料html5 firefox os javascript 请到5狐网，源码下载
canvas学习笔记（一）-认识canvas的更多相关文章
- canvas学习笔记、小函数整理
http://bbs.csdn.net/topics/391493648 canvas实例分享 2016-3-16 http://bbs.csdn.net/topics/390582151 html5 ...
- canvas学习笔记，实用知识点总结（上）
本博客是本人日常学习笔记,作为重要知识点的总结记录,随笔风格可能更倾向于个人的学习习惯和方式,若对您有帮助十分荣幸,若存在问题欢迎互相学习探讨,前端小白一枚在此恭候. 一.基本使用规则 1.创建画布 ...
- canvas学习笔记（下篇） -- canvas入门教程--保存状态/变形/旋转/缩放/矩阵变换/综合案例（星空/时钟/小球）
[下篇] -- 建议学习时间4小时 课程共(上中下)三篇 此笔记是我初次接触canvas的时候的学习笔记,这次特意整理为博客供大家入门学习,几乎涵盖了canvas所有的基础知识,并且有众多练习案例, ...
- canvas学习笔记（中篇） -- canvas入门教程-- 颜色/透明度/渐变色/线宽/线条样式/虚线/文本/阴影/图片/像素处理
[中篇] -- 建议学习时间4小时 课程共(上中下)三篇 此笔记是我初次接触canvas的时候的学习笔记,这次特意整理为博客供大家入门学习,几乎涵盖了canvas所有的基础知识,并且有众多练习案例, ...
- canvas学习笔记（上篇）-- canvas入门教程 -- canvas标签/方块/描边/路径/圆形/曲线
[上篇] -- 建议学习时间4小时 课程共(上中下)三篇 此笔记是我初次接触canvas的时候的学习笔记,这次特意整理为博客供大家入门学习,几乎涵盖了canvas所有的基础知识,并且有众多练习案例, ...
- 学习笔记：HTML5 Canvas绘制简单图形
HTML5 Canvas绘制简单图形 1.添加Canvas标签,添加id供js操作. <canvas id="mycanvas" height="700" ...
- canvas学习笔记：canvas对图片的像素级处理--ImageData的应用
学习了canvas的基本绘图功能后,惊喜的发现canvas对图片数据也有相当强大的处理功能,能够从像素级别操作位图,当然[lte ie8]不支持. 主要的函数有三个: ctx.createImageD ...
- 【canvas学习笔记一】基本认识
<canvas>标签定义了一块画布,画布可以在网页中绘制2D和3D图象,现在先学习如何绘制2D图象,绘制3D图象属于WebGL的内容(也就是网页版的OpenGL,3D图形接口). 属性 & ...
- [学习笔记]HTML5之canvas
虐了一下午的canvas 先撸了一个七巧板 <!doctype html> <html> <head> <meta charset="utf-8&q ...
- canvas学习笔记之2d画布基础的实现
一. Canvas是啥 < canvas > 是一个可以使用脚本(通常是js)来绘图的HTML元素 < canvas > 最早由Apple引入WebKit,用于Mac OS X ...
随机推荐
- ES6新特性-----变量和字符串
一.变量 1. LET 我们都习惯用var 来声明变量,现在还可以用let来声明变量,两者的主要区别是作用域:var声明的变量作用域为包围它的函数,而let声明的变量作用域仅在它所在的块中.(在ES5 ...
- 中国市场 Android App 兼容性报告
由于手机操作系统的不同,以及操作系统版本之间的差异,使得真机测试这个过程尤其复杂,涉及终端.人员.工具.时间.管理等方面的问题,Android系统的设备因操作系统多样性和终端类型的庞杂,问题尤为复 ...
- Linux进程间通信——使用信号量
这篇文章将讲述别一种进程间通信的机制——信号量.注意请不要把它与之前所说的信号混淆起来,信号与信号量是不同的两种事物.有关信号的更多内容,可以阅读我的另一篇文章:Linux进程间通信——使用信号.下面 ...
- cdoj 秋实大哥带我飞 最短路走法 含0权边
//做完这题以后终于理解白书上的边为什么要那样定义了 可以很方便的在o(1) 时间内找到反向边 解法:先跑一边最短路,然后检查最短路上有没有0权边(dfs就好,但是每条边只能走一次,这里就需要用异或找 ...
- securecrt在linux与windows之间传输文件(转)
摘自:http://blog.csdn.net/rangf/article/details/6096365 SecureCRT这款SSH客户端软件同时具备了终端仿真器和文件传输功能.比ftp命令方便多 ...
- 一个利用扩展方法的实例：AttachDataExtensions
扩展方法是C# 3.0(老赵对VB不熟)中最简单,也是最常用的语言特性之一.这是老赵自以为的一个简单却不失经典的实例: [AttributeUsage(AttributeTargets.All, Al ...
- Copy from chromium-dev!
https://app.yinxiang.com/pub/gguangle0/chromium-dev 做了一些搬运工的活..............
- html系列教程--元素
HTML 元素语法 HTML 元素以开始标签起始 HTML 元素以结束标签终止 元素的内容是开始标签与结束标签之间的内容 某些 HTML 元素具有空内容(empty content) 空元素在开始标签 ...
- Nicholas C. Zakas如何面试前端工程师
转载自:http://www.cnblogs.com/yizuierguo/archive/2010/02/04/1663767.html Original Post:Interviewing the ...
- 状态压缩DP------学习小记
状态DP主要用的还是DP思想,顾名思义,加了一个状态,主要是用来求状态个数的. 状态是用二进制数来表示的,也就是用0或1来表示,每一行有一个状态数,就是由这一行的0或1组成的,首先我们要获得每行的状态 ...