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. 平面上画n条直线，最多能将平面分成多少部分？

    转自:http://blog.csdn.net/cywosp/article/details/6724522 在一个平面上画1999条直线,最多能将这一平面划分成多少个部分? 没有直线时有一个空间:( ...

  2. 题目1096：日期差值（a-b=(a-c)-(b-c)）

    http://ac.jobdu.com/problem.php?pid=1096 题目描述: 有两个日期,求两个日期之间的天数,如果两个日期是连续的我们规定他们之间的天数为两天 输入: 有多组数据,每 ...

  3. mysql fetch 系列函数

    浏览器输出内容同上. 当使用 MYSQL_BOTH 或省略该参数是,将同时具有 MYSQL_NUM 与 MYSQL_ ASSOC 的特性. MySQL mysql_fetch_array 函数取得查询 ...

  4. 【转载】chmod u+s

    转自:http://blog.chinaunix.net/uid-26642180-id-3378119.html Set uid, gid,sticky bit的三个权限的详细说明 一个文件都有一个 ...

  5. SQL Server Cpu 100% 的常见原因及优化

    SQL Server Cpu 100% 的情况并不太常见,一般引起 SQL Server 产生性能问题的,都是 阻塞.连接数.IO 磁盘等.所以,一般SQL Server 的使用率都是比较低的.但是, ...

  6. soliworks三维机柜布局（一）创建设备型号库

    以某直升机电气系统为例:为电路中的各个设备创建设备型号库是进行三维线束设计的前提之一(如下图所示:窗口中箭头所指的3D部件一定要为每个设备都添加) 设备只有添加了3d模型,在solidworks进行机 ...

  7. JS 实现地区，省份，城市，县区4级联动

    刚学JS,实战一下,做一个省份信息4级联动. 但是网上查了都是3级的,没有4级,现在做一个的是带地区的4级联动,最简单的办法是修改别人的代码,最开始找到的事类似于下边这个的: 省市县关联菜单 < ...

  8. 似曾相识的 RecyclerView

    一.常用方法 RecyclerView 与 ListView.GridView 类似,都是可以显示同一种类型 View 的集合的控件. 首先看看最简单的用法,四步走: ①接入 build.gradle ...

  9. Android v4 包和v7包问题

    昨天新建了一个android项目,加入了一个bootstrap的外部依赖和一个底部导航栏的外部依赖.结果jj 了,老是提醒我v4包v7包冲突: 事实是这样的,首先我的底部导航依赖库里面有一个v4包,那 ...

  10. ssh免密码登录记录

    做mha.hadoop安装过程中都要用ssh免密码登陆,查过一些资料,踩过很多坑,下面用简单记录一下 首先要安装ssh linux : centOS 6.5 yum -y install *ssh* ...