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. CentOS 7搭建SVN服务器

    安装步骤如下: 1.yum install subversion 2.查看安装版本 svnserve --version 3.创建SVN版本库目录 mkdir -p /var/svn/svnrepos ...

  2. [原]在GeoServer中为OpenStreetMap数据设置OSM样式

    转载请注明作者think8848和出处(http://think8848.cnblogs.com) 在前面几篇文章中,我们讲到了部署Postgresql,部署PostGis,部署GeoServer以及 ...

  3. [LeetCode] Add Two Numbers II 两个数字相加之二

    You are given two linked lists representing two non-negative numbers. The most significant digit com ...

  4. C#进阶系列——WebApi 身份认证解决方案：Basic基础认证

    前言:最近,讨论到数据库安全的问题,于是就引出了WebApi服务没有加任何验证的问题.也就是说,任何人只要知道了接口的url,都能够模拟http请求去访问我们的服务接口,从而去增删改查数据库,这后果想 ...

  5. 大三那年在某宝8块钱买的.NET视频决定了我的职业生涯

    前言 谨以此文献给那些还在大学中迷茫的莘莘学子们! 韩愈在<师说>中提出了作为师者应该做的三件事:传道.授业.解惑. 1.传道:培养学生的道德观 2.授业:传授学生专业技能 3.解惑:解答 ...

  6. 常用Linux命令

    1.mkdir 建立目录 $ mkdir testdir 2.ls   列出目录下的内容的详细信息  ls -al testdir 3.cd  更换当前工作目录   cd testdir 4.pwd  ...

  7. python基础-面向对象进阶

    一.什么是反射 反射的概念是由Smith在1982年首次提出的,主要是指程序可以访问.检测和修改它本身状态或行为的一种能力(自省).这一概念的提出很快引发了计算机科学领域关于应用反射性的研究.它首先被 ...

  8. 推公式hdu2298

    (0,0)点到(x,y)以v射箭 问 最小的角度 不能射到 -1 x=v*cos(a)*t; y=v*sin(a)*t-0.5*g*t*t; 消去t; y=x*tan(a)-0.5*g*x*x/(v* ...

  9. 【配置】检测到在集成的托管管道模式下不适用的ASP.NET设置的解决方法（非简单设置为【经典】模式）。

      ×   检测到在集成的托管管道模式下不适用的ASP.NET设置的解决方法(非简单设置为[经典]模式). 我们将ASP.NET程序从IIS6移植到IIS7,可能运行提示以下错误: HTTP 错误 5 ...

  10. 在Mac系统中安装及配置Apache Tomcat

    1.下载Tomcat http://tomcat.apache.org/download-80.cgi 下载ZIP包,解压后放至任意地址,本例中放在/Users/GuQiang/Tomcat/apac ...