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的更多相关文章

  1. canvas学习笔记、小函数整理

    http://bbs.csdn.net/topics/391493648 canvas实例分享 2016-3-16 http://bbs.csdn.net/topics/390582151 html5 ...

  2. canvas学习笔记，实用知识点总结（上）

    本博客是本人日常学习笔记,作为重要知识点的总结记录,随笔风格可能更倾向于个人的学习习惯和方式,若对您有帮助十分荣幸,若存在问题欢迎互相学习探讨,前端小白一枚在此恭候. 一.基本使用规则 1.创建画布 ...

  3. canvas学习笔记（下篇） -- canvas入门教程--保存状态/变形/旋转/缩放/矩阵变换/综合案例（星空/时钟/小球）

    [下篇] -- 建议学习时间4小时  课程共(上中下)三篇 此笔记是我初次接触canvas的时候的学习笔记,这次特意整理为博客供大家入门学习,几乎涵盖了canvas所有的基础知识,并且有众多练习案例, ...

  4. canvas学习笔记（中篇） -- canvas入门教程-- 颜色/透明度/渐变色/线宽/线条样式/虚线/文本/阴影/图片/像素处理

    [中篇] -- 建议学习时间4小时  课程共(上中下)三篇 此笔记是我初次接触canvas的时候的学习笔记,这次特意整理为博客供大家入门学习,几乎涵盖了canvas所有的基础知识,并且有众多练习案例, ...

  5. canvas学习笔记（上篇）-- canvas入门教程 -- canvas标签/方块/描边/路径/圆形/曲线

    [上篇] -- 建议学习时间4小时  课程共(上中下)三篇 此笔记是我初次接触canvas的时候的学习笔记,这次特意整理为博客供大家入门学习,几乎涵盖了canvas所有的基础知识,并且有众多练习案例, ...

  6. 学习笔记：HTML5 Canvas绘制简单图形

    HTML5 Canvas绘制简单图形 1.添加Canvas标签,添加id供js操作. <canvas id="mycanvas" height="700" ...

  7. canvas学习笔记：canvas对图片的像素级处理--ImageData的应用

    学习了canvas的基本绘图功能后,惊喜的发现canvas对图片数据也有相当强大的处理功能,能够从像素级别操作位图,当然[lte ie8]不支持. 主要的函数有三个: ctx.createImageD ...

  8. 【canvas学习笔记一】基本认识

    <canvas>标签定义了一块画布,画布可以在网页中绘制2D和3D图象,现在先学习如何绘制2D图象,绘制3D图象属于WebGL的内容(也就是网页版的OpenGL,3D图形接口). 属性 & ...

  9. [学习笔记]HTML5之canvas

    虐了一下午的canvas 先撸了一个七巧板 <!doctype html> <html> <head> <meta charset="utf-8&q ...

  10. canvas学习笔记之2d画布基础的实现

    一. Canvas是啥 < canvas > 是一个可以使用脚本(通常是js)来绘图的HTML元素 < canvas > 最早由Apple引入WebKit,用于Mac OS X ...

随机推荐

  1. Android设置全屏

    全屏显示 getWindow().setFlags(WindowManager.LayoutParams.FLAG_FULLSCREEN, WindowManager.LayoutParams.FLA ...

  2. EL表达式(转)

    转自:http://www.cnblogs.com/Fskjb/archive/2009/07/05/1517192.html EL 全名为Expression Language EL 语法很简单,它 ...

  3. java转换字符串的编码(转)

    package com.Alex.base; import java.io.UnsupportedEncodingException; /** * 转换字符串的编码 */ public class C ...

  4. C语言的本质（2）——二进制、八进制、十六进制与十进制

    二进制是计算技术中广泛采用的一种数制.二进制数据是用0和1两个数码来表示的数.它的基数为2,进位规则是"逢二进一",借位规则是"借一当二",由18世纪德国数理哲 ...

  5. Windows Azure 社区新闻综述（#68 版）

    欢迎查看最新版本的每周综述,其中包含有关云计算和 Windows Azure 的社区推动新闻.内容和对话. 以下是过去一周基于您的反馈汇集在一起的内容: 文章.视频和博客文章 在 Windows Az ...

  6. 普林斯顿大学算法课 Algorithm Part I Week 3 排序稳定性 Stability

    稳定性(Stability):先按性质A排序,再按性质B排序,性质B相同的那些项是否仍然是按性质A排序的? 一个稳定的排序,相同值的元素应仍保持相对顺序(relative order) 稳定的算法:插 ...

  7. 矩形嵌套(LIS)

    矩形嵌套 时间限制:3000 ms  |  内存限制:65535 KB 难度:4   描述 有n个矩形,每个矩形可以用a,b来描述,表示长和宽.矩形X(a,b)可以嵌套在矩形Y(c,d)中当且仅当a& ...

  8. 怎样解决Ubuntu发热严重地问题

    刚装ubuntu的时候那是相当地热,hot.直接地原因是没有对应地显卡驱动,然后在software update里面找到Nivida地最新驱动,兴高採烈地装上试一试.一点用处没有! 在网上搜了搜,有一 ...

  9. 9大理由告诉你为什么应该学习HTML跟CSS

    你是不是听过太多人告诉你:「人人都应该要会 coding!」都快要不耐烦了对吧? 究竟为什么身为一个行销专业者.作家.金融巨擘--,整个世界还要你学会 coding? 事实上仅仅要对 HTML.CSS ...

  10. Quartz 2D官方文档翻译（持续更新中）

    转换  核心绘图模型定义了两个完全独立的坐标空间:用户空间,一个是代表文档页,和设备空间,另外一个代表本机设备的分辨率.用户空间坐标是与设备空间中像素分辨率无关的浮点数字.当你想要打印或者显示你的文档 ...