canvas是HTML5中新增的标签，下面是各浏览器的支持程度：

canvas的默认大小为：宽-300px，高-150px（注意：画布的大小作为canvas标签的行内样式设置，而且是没有“px”单位的哦，  如果你在canvas的css样式中给它设置大小，它只会当做放大比例来处理！），下面这段代码在支持canvas的浏览器中会显示一块400px400px的白色（默认颜色）画布，在不支持canvas的浏览器中只是显示canvas中的文字而已哦。

<!doctype html>

<html lang="en">

<head>

    <meta charset="UTF-8">

    <title>Canvas</title>

    <style type="text/css">

    body{ background:gray;}

    #c1{ background:white;}

    </style>

</head>

<body>

    <!-- 默认宽300， 高150 -->

    <canvas id="c1" width="400" height="400">

        你的浏览器不支持canvas..

    </canvas>

</body>

</html>

下面我们在刚刚创建的画布中画一个带有边框的矩形：

var oC = document.getElementById("c1");

        var oGC = oC.getContext('2d');    //创建一个绘图环境

        oGC.fillStyle = 'red';    //设置填充样式

        oGC.strokeStyle = 'blue';    //设置表框样式

        oGC.lineWidth = 10;    //设置边框的大小

        oGC.lineJoin = 'round';    //端点的样式-圆角

        //oGC.lineJoin = 'bevel';    //斜线

        oGC.fillRect(50, 50, 100, 100);    //在50,50处画一个矩形，并填充它

        oGC.strokeRect(50.5, 50.5, 100, 100);    //在来画个边框

效果图见：http://runjs.cn/code/vvdbykgz

不知道大家注意到没有，上面代码中最后一行oGC.strokeRect(50.5, 50.5, 100, 100);为什么起始坐标还要加上个0.5像素?这是因为如果边框长度是1像素的话，他从50,50开始两边各占0.5，这个0.5像素给浏览器是不好显示的，所以浏览器只好各边给你一个像素，结果最后就是2个像素的宽度了，这就是为什么要加那0.5个像素了。

我们还可以绘制两个或多个图形， 通过binginPath()和closePath()来控制路径：

        var oC = document.getElementById("c1");

        var oGC = oC.getContext('2d');

        oGC.beginPath();

        oGC.moveTo(100, 100);

        oGC.lineTo(200, 200);

        oGC.lineTo(300, 200);

        oGC.closePath();

        oGC.stroke();

        oGC.beginPath();

        oGC.moveTo(100, 200);

        oGC.lineTo(200, 300);

        oGC.lineTo(300, 300);

        oGC.closePath();

        oGC.fill();

效果图见：http://runjs.cn/code/lmrv8iuo

通过clearRect()可以清除画布中某个区域的数据，我们再结合定时器可以创建一个方块移动的效果：

var oC = document.getElementById("c1");

var oGC = oC.getContext('2d');

var num = 0;

oGC.fillRect(0, 0, 100, 100);

setInterval(function(){

    num++;

    oGC.clearRect(0, 0, oC.width, oC.height);

    oGC.fillRect(num, num, 100, 100);

}, 30);

效果图见：http://runjs.cn/code/prkby9xp

HTML5 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元素通过脚本语言(通常是Javascript) 绘制图形, 它仅仅是一个绘图环境,需要通过getContext('2d')方法获得绘图环境对象,使用绘图环境对象在canvas元 ...

  7. HTML5硕士学习笔记

    如今,该集团经过培训的同事给大家HTML5,他出席了两个5训练日,大概过一次给我们,在一个很形象.同事们更感兴趣的是. 课后共享所有的课件.在热情的新技术,我想工作有一个良好的早晨,我决定重新学习课件 ...

  8. canvas学习笔记（一）-认识canvas

    canvas是html5新增的一个标签,主要用于图形的绘制.我们可以把它理解为是浏览器给我们提供了一个画板,至于要绘制怎样的画卷,就看神笔马良你的主意了.而在canvas上绘制图形使用的笔,就是js了 ...

  9. canvas学习笔记一

    为了研究pixi库,就顺带从头到位学习下canvas吧 判断支持力度 var webgl = (function() { try { var canvas = document.createEleme ...

随机推荐

  1. MySql in子句 效率低下优化

    MySql in子句 效率低下优化 背景: 更新一张表中的某些记录值,更新条件来自另一张含有200多万记录的表,效率极其低下,耗时高达几分钟. where resid in ( ); 耗时 365s ...

  2. 【GSM】GTM900C的应用——短信

    虽说GSM已经很老旧,但其低廉的价格,非常适合一些需要小数据上网传输和短信等功能的应用场合. 不知道GSM能否像51单片机一样,在低端应用中长久不衰.GTM900C发送短信,支持两种模式,TXT和PD ...

  3. ZOJ People Counting

    第十三届浙江省大学生程序设计竞赛 I 题, 一道模拟题. ZOJ  3944http://www.icpc.moe/onlinejudge/showProblem.do?problemCode=394 ...

  4. EXCEL中对1个单元格中多个数字求和

    如A1=3779.3759.3769.3781.3750,A2对A1中4个数字求和怎么求!请高手赐教! 方法一:在B1中输入公式=SUM(MID(A1,{1,6,11,16,21},4)*1) 方法二 ...

  5. orcle函数

    一.字符函数1.chr给出整数,返回对应的字符:SQL>select chr(54740) zhao,chr(65) chr65 from dual;ZHAO CHR65---- -----赵 ...

  6. oracle函数

    oracle中函数分为3大类,分别为:单行函数,分组函数,分析函数. 1.单行函数 单行函数同时只能对一行进行操作,且对输入的每一行返回一行输出结果. 单行函数还分为:字符函数,数子函数,日期函数,转 ...

  7. 深入理解JSONP原理——前端面试

    JSON和JSONP虽然只有一个字之差,但是它们俩是八竿子打不着的:JSON是一种数据交换格式,JSONP是非正式的跨域数据交换协议. 为什么说JSONP是非正式的传输协议呢?因为它就是利用了< ...

  8. [LeetCode] First Unique Character in a String 字符串第一个不同字符

    Given a string, find the first non-repeating character in it and return it's index. If it doesn't ex ...

  9. [LeetCode] Partition List 划分链表

    Given a linked list and a value x, partition it such that all nodes less than x come before nodes gr ...

  10. ES6新特性概览

    本文基于lukehoban/es6features ,同时参考了大量博客资料,具体见文末引用. ES6(ECMAScript 6)是即将到来的新版本JavaScript语言的标准,代号harmony( ...