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. JS--轻松设置获取表单数据

    接触过Angularjs的都知道,ng支持双向绑定,我们可以轻轻松松的通过ngModel将我们的值绑定到界面,当修改了值提交表单的时候不需要再重新通过ID去重新抓取输入框信息了.那对于我们开发前台网站 ...

  2. Android LayoutInflater.inflate(int resource, ViewGroup root, boolean attachToRoot)的参数理解

    方法inflate(int resource, ViewGroup root, boolean attachToRoot) 中 第一个参数传入布局的资源ID,生成fragment视图,第二个参数是视图 ...

  3. jmeter（十）参数化

    jmeter可以用来做接口.性能测试,原理是模拟客户端向服务器发送请求,请求里面包含两种不同情况的参数,一种是包含在URL中,一种是请求中需要发送的参数. 包含在URL中的参数,例如:http://b ...

  4. Nuget 命令 NuGet 管理项目库

    因为可视化库程序包管理器的局限性,有很多需要的功能在界面中无法完成. 以下技巧均需要在"程序包管理器控制台"中使用命令来完成. 一.改变项目目标框架后,更新程序包 当改变项目的目标 ...

  5. cf Round 633

    A.Rebus(思维题) 给出一个这种形式的表达式 ? + ? - ? + ? = n.要求用1-n的数字填充疑问号使等式成立,如果不存在这样的方式,则输出不可能.存在则输出任意的方式. 移项可以变成 ...

  6. [LeetCode] Design Twitter 设计推特

    Design a simplified version of Twitter where users can post tweets, follow/unfollow another user and ...

  7. [LeetCode] Nested List Weight Sum 嵌套链表权重和

    Given a nested list of integers, return the sum of all integers in the list weighted by their depth. ...

  8. 配置generatorConfig.xml自动生成的代码的sql书写问题

    <?xml version="1.0" encoding="UTF-8" ?> <!DOCTYPE generatorConfiguratio ...

  9. React数据流和组件间的沟通总结

    今天来给大家总结下React的单向数据流与组件间的沟通. 首先,我认为使用React的最大好处在于:功能组件化,遵守前端可维护的原则. 先介绍单向数据流吧. React单向数据流: React是单向数 ...

  10. android studio 提示翻译

    1. you can import your settings from a previous version of Studio可以导入您的设置从先前版本的工作室 2. I want to impo ...