canvas是html5中很重要的一部分，我们可以用它来绘制各种平面图形， 3d图，动画等等。每每看到网上超炫的html5页面，首先立马下载下来，心里想着有一天自己也可以做出这样酷炫的效果，骚年你是不是这样的！

比如这样的：

还有这样的（这个是3d效果，点击图片进去看看吧）：

但是，功夫不是一天练成的，一门新技术不是你学着做个demo就掌握了的，我们先要一点一点地学习基础知识才行呀。刚开始学html5的时候，我们都会先接触到canvas，api给的方法有很多，我是这样学的，自己写个demo，一个方法一个属性的去试，看它出来是个什么样子的。在这里我主要标记一下，我在练习过程中，遇到的一些疑惑。总结一下canvas.save()和canvas.restore()， canvas.beginPath()和canvas.closePath()怎么用。先把代码拉出来：

canvas.save()和canvas.restore()用法：

save() 和restore()主要在对画布进行转换（如：扭曲，旋转，缩放等）时很用作用。save()方法是保存画布当前状态的，restore()是取出画布 保存的状态。比如现在要对画布进行多个动作处理，第一个动作进行了缩放处理，如果在没有缩放处理前保存一下空白状态，那么再进行第二个动作新建时也会有第 一个动作缩放效果的影响。所以最好在对画布多个动作处理前，先canvas.save()保存一下空白状态或者你希望后面动作需要出现的状态，当前动作处 理完了再canvas.restore()一下，取出保存的空白状态保证后面的动作不受影响。

 /**图形变形**/

    var c10 = document.getElementById("myCanvas10");

    var cre10 = c10.getContext("2d");

    cre10.fillStyle = "#eeeeff";

    cre10.fillRect(0, 0, 300, 300);

    cre10.save();

    cre10.fillStyle = "rgba(255, 0, 0, 0.1)";

    cre10.translate(50, 50);

    cre10.scale(0.5, 0.5);

    cre10.rotate(Math.PI/4);

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

    cre10.restore();

    cre10.save();

    cre10.fillStyle = "rgba(255, 0, 0, 0.2)";

    cre10.rotate(Math.PI/4);

    cre10.translate(100, 100);

    cre10.scale(0.5, 0.5);

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

    cre10.restore();

    cre10.save();

    cre10.fillStyle = "rgba(255, 0, 0, 0.5)";

    cre10.translate(130, 130);

    cre10.scale(0.5, 0.5);

    cre10.shadowOffsetX = 10;

    cre10.shadowOffsetY = 10;

    cre10.shadowColor = "rgba(100, 100, 100, 0.5)";

    cre10.shadowBlur = 1.5;

    cre10.fillRect(0, 0, 150, 150);

本来效果是这样的：

如果去掉canvas.save()和canvas.restore()以后就是这样的：

canvas.beginPath()和canvas.closePath()用法：

这两个经常应用在绘制线条和圆弧中，可以成对用，也可以单独用，他们两个没有必然的联系。beginPath()是告诉浏览器我要开始划线了记录一下，这里作为一个起始点。closePath()是闭合路径，将结束焦点和起始点用直线链接起来。如果没有有closePath()结束的话，就不会有直线去链接结束点和起始点。

两个一起用是这样的：

没有用closePath()关闭线条：

但是往往不用closePath()方法还可以达到很好的效果：

下面是我用canvas画的小房子，很难看但是也要写出来：

<!DOCTYPE html>

<html>

<head lang="en">

    <meta charset="UTF-8">

    <title>绘制图形</title>

    <style type="text/css">

        .canv{

            border:1px #d3d3d3 solid;

            margin:20px 10px;

        }

    </style>

</head>

<body>

<canvas class="canv" width="300" height="300" id="canvas01"></canvas>

<script>

    window.onload = function(){

        drawHouse("canvas01");

    };

    //绿瓦红房子

    function drawHouse(id){

        var canv = document.getElementById(id);

        var canvas = canv.getContext("2d");

        canvas.fillStyle = "#eeeeff";

        canvas.fillRect(0, 0, 300, 300);

        console.info("第一步：空白，啥也没有");

        canvas.fillStyle = "green";

        canvas.beginPath();

        canvas.moveTo(150, 10);

        canvas.lineTo(270, 110);

        canvas.lineTo(30, 110);

        canvas.closePath();

        canvas.fill();

        canvas.fillStyle = "black";

        canvas.beginPath();

        canvas.moveTo(80, 68);

        canvas.lineTo(80, 20);

        canvas.lineTo(100, 20);

        canvas.lineTo(100, 52);

        canvas.closePath();

        canvas.fill();

        console.info("第二步：先盖绿色的房顶，黑色的烟囱");

        canvas.fillStyle = "red";

        canvas.beginPath();

        canvas.moveTo(50, 110);

        canvas.lineTo(50, 300);

        canvas.lineTo(250, 300);

        canvas.lineTo(250, 110);

        canvas.closePath();

        canvas.fill();

        console.info("第三步：刷红色的墙");

        canvas.fillStyle = "blue";

        canvas.beginPath();

        canvas.moveTo(80, 140);

        canvas.lineTo(80, 190);

        canvas.lineTo(130, 190);

        canvas.lineTo(130, 140);

        canvas.closePath();

        canvas.fill();

        canvas.strokeStyle = "white";

        canvas.beginPath();

        canvas.moveTo(105, 140);

        canvas.lineTo(105, 190);

        canvas.closePath();

        canvas.stroke();

        canvas.beginPath();

        canvas.moveTo(80, 165);

        canvas.lineTo(130, 165);

        canvas.closePath();

        canvas.stroke();

        console.info("第四步：开个蓝色窗户白色的格子");

        canvas.fillStyle = "white";

        canvas.beginPath();

        canvas.moveTo(150, 210);

        canvas.lineTo(150, 300);

        canvas.lineTo(210, 300);

        canvas.lineTo(210, 210);

        canvas.closePath();

        canvas.fill();

        canvas.fillStyle = "black";

        canvas.beginPath();

        canvas.arc(200, 255, 5, 0, Math.PI*2);

        canvas.closePath();

        canvas.fill();

        canvas.save();

        console.info("第五步：开一扇白色的门，黑把手");

    }

</script>

</body>

</html>

总结html5-canvas学习笔记的更多相关文章

  1. HTML5 canvas学习笔记（一）

    canvas是HTML5中新增的标签,下面是各浏览器的支持程度: canvas的默认大小为:宽-300px,高-150px(注意:画布的大小作为canvas标签的行内样式设置,而且是没有“px”单位的 ...

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

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

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

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

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

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

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

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

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

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

  7. [HTML5 Canvas学习] 基础知识

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

  8. HTML5硕士学习笔记

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

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

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

  10. canvas学习笔记一

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

随机推荐

  1. setBackgroundMusicLoop for cocos2dx

    给cocos2dx的SimpleAudioEngine加上设置背景音乐循环的方法,详见gist.

  2. C# 调用Dll 传递字符串指针参（转）

    http://www.cnblogs.com/jxsoft/archive/2011/07/06/2099061.html

  3. BroadcastReceiver学习笔记

    1.在代码中注册与在AndroiManifest.xml注册的区别 (a)在代码中注册可以控制注册与注销的时间.比如在onCreate-onDestory, onStart-onStop, onRes ...

  4. 转载 在.net中使用GAC

    转载出处 https://blog.log4d.com/2011/01/gac/ GAC GAC是什么?是用来干嘛的?GAC的全称叫做全局程序集缓存,通俗的理解就是存放各种.net平台下面需要使用的d ...

  5. git安装教程

    msysgit是Windows版的Git,从https://git-for-windows.github.io下载(网速慢的同学请移步国内镜像),然后按默认选项安装即可. 安装完成后,在开始菜单里找到 ...

  6. iOS OC语言: Block底层实现原理 (转载)

    作者:Liwjing 地址:http://www.jianshu.com/users/8df89a9d8380/latest_articles 先来简单介绍一下Block Block是什么? 苹果推荐 ...

  7. NOTES : A Model of Gas Exchange for Hyperpolarized Xe(129) Magnetic Resonance of the Lung

    NOTES :  A Model of Gas Exchange for Hyperpolarized Xe(129) Magnetic Resonance of the Lung  背景知识: Ga ...

  8. cocos2dx中android下动态更新.so文件

    作者:HU 转载请注明,原文链接:http://www.cnblogs.com/xioapingguo/p/4037595.html  因为没用lua脚本写游戏,所以每次发布出去后,发现在bug,需要 ...

  9. 关于python文件操作 （转载）

    总是记不住API.昨晚写的时候用到了这些,但是没记住,于是就索性整理一下吧: python中对文件.文件夹(文件操作函数)的操作需要涉及到os模块和shutil模块. 得到当前工作目录,即当前Pyth ...

  10. 理解C++ 宏

    1.什么是宏,它解决什么问题? 宏的本质是文本替换,考虑下面的需求,程序中多次使用圆周率Pi,在每个地方都使用3.1415,显然很愚蠢.有没有好的办法呢?使用宏,如下: #define Pi 3.14 ...