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. Web Service

    Web Service全称XML Web Service WebService是一种可以接收从Internet或者Intranet上的其它系统中传递过来的请求,轻量级的独立的通讯技术.是:通过SOAP ...

  2. python的函数

    函数一词起源于数学,但是在编程中的函数和数学中的有很大不同.编程中的函数式组织好的,可重复使用的,用于实现单一功能或相关联功能的代码块. 我们在学习过程中已经使用过一些python内建的函数,如pri ...

  3. Cookie和Session的那些事儿

    Cookie和Session都是为了保持用户的访问状态,一方面为了方便业务实现,另一方面为了简化服务端的程序设计,提高访问性能.Cookie是客户端(也就是浏览器端)的技术,设置了Cookie之后,每 ...

  4. 【WCF】wcf不支持的返回类型

    亲测不支持 DateView 不支持函数重载 参看:http://www.cnblogs.com/zeroone

  5. 信鸽推送 10004,os文件配置出错,解决办法

    信鸽推送注册失败 返回码 10004 是 os  配置出现问题 经过询问客服,得到以下解决办法 将SDK中的so文件复制下来 新建文件夹jniLibs,并将 so 配置文件粘贴进去 便可完成注册

  6. [转] JAVA读取excel数据（插入oracle数据库）

    原文地址:http://blog.csdn.net/zczzsq/article/details/16803349 本实例做的是读取execl(只能读取.xls的execl,即只能读取03版的),如果 ...

  7. Web Deploy自动配置

    自动发布配置,需要在发布的配置文件里面添加以下一句,避免在发布时,无权限! <Project ToolsVersion="4.0" xmlns="http://sc ...

  8. MATLAB的三维散点图

    MATLAB中三维散点图函数为scatter3(x,y,z) 三维火柴图为stem3(x,y,z)

  9. React Diff算法

    Web界面由DOM树来构成,当其中某一部分发生变化时,其实就是对应的某个DOM节点发生了变化.在React中,构建UI界面的思路是由当前状态决定界面.前后两个状态就对应两套界面,然后由React来比较 ...

  10. JS控制，返回上一页之后强行刷新一次

    网站建设过程中,提交页面后我们经常要用到window.history.go(-1)返回上一页,因为页面的缓存功能,我们只能返回上次操作的页面,但在删除等操作中,我们希望实时看到删除项目后的页面,这就要 ...