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 ...
随机推荐
- 在strings.xml中定义html标签
在项目的开发过程中,需要用到把html内容放到strings.xml文件中,然后再读取到TextView中.原本以为像普通文本一样直接SetText就行了,结果行不通,大大超出我的预料.经过网上搜索, ...
- CC++初学者编程教程(8) VS2013配置编程助手与QT
1. 2. 配置编程助手 3. 4. 5. 6. 7. 8. 9. 10. 11. 12. 13. 14. 15. 16. 17. 18. 19． 20. 21. 22. 23. 24. 25. 26 ...
- 一个Windows C++的线程池的实现
此线程池所依赖的线程类,请参看<一个Windows C++的线程类实现>: http://blog.csdn.net/huyiyang2010/archive/2010/08/10/580 ...
- C++字符串之一（字符表示）
在C++中有两种类型可以用于表示字符,char和wchar_t. 但是字符串格式的标准却有很多种,如ASCII,UTF8,UTF16,UTF32等等.字符串的格式和char/wchar_t 的关系是什 ...
- Git与SVN的比较及优点
前天处女面被问到了你为什么要用Git而不用SVN,答的不是很理想,正好今天晚上小组内部进行了Git使用的培训,便想着总结一下Git与SVN的差异以及Git的优点. 一.Git与SVN的比较 1.git ...
- 网易云课堂_程序设计入门-C语言_期末考试编程题
1 字数统计(10分) 题目内容: 你的程序要读入一篇英文文章,然后统计其中的单词数来输出.需要统计的数据为: 总的单词数量: 含有1个字母到10个字母的单词的数量. 单词和单词的间隔是由以下标点符号 ...
- vim简单命令教程-firstblood
你想以最快的速度学习人类史上最好的文本编辑器VIM吗?你先得懂得如何在VIM幸存下来,然后一点一点地学习各种戏法. Vim the Six Billion Dollar editor Better, ...
- oj 小黑华丽的逆袭机会
Problem H: 小黑华丽的逆袭机会 Time Limit: 1 Sec Memory Limit: 128 MB Submit: 79 Solved: 7 [Submit][Status][ ...
- 自学SQL语言的例子（使用MySQL实现）
SQL语言作为一种数据库管理的标准语言有着极为广泛的应用场景,菜鸟入门选用的数据库软件是轻量级的免费(这个极为重要)的MySQL,下载链接如下:http://www.mysql.com/downloa ...
- Java代码整理