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. 谈谈Nginx有哪些特点

    1.热部署        我个人觉得这个很不错.在master管理进程与worker工作进程的分离设计,使的Nginx具有热部署的功能,那么在7×24小时不间断服务的前提下,升级Nginx的可执行文件 ...

  2. 【Spark学习】Apache Spark项目简介

    引言:本文直接翻译自Spark官方网站首页 Lightning-fast cluster computing 从Spark官方网站给出的标题可以看出:Spark——像闪电一样快的集群计算 Apache ...

  3. leetcode@ [126] Word Ladder II (BFS + 层次遍历 + DFS)

    https://leetcode.com/problems/word-ladder-ii/ Given two words (beginWord and endWord), and a diction ...

  4. JM编解码264

    看到有人说JM解码编码264 尝试了一下http://iphome.hhi.de/suehring/tml/download/win7下 vs2010 编译后,得到编码解码可执行文件ldecod.ex ...

  5. [Xcode使用 - 1] 自定义代码块引用

    Xcode本身带有编码常用的代码块可供使用,如下图   例如 “if” 这个代码块的定义     调用方法 1.可以直接拖放带编辑区   2.使用快捷键,键入 “if”, Xcode就会出现自动完成的 ...

  6. Oracle- 表的管理

    一.表名和列的命名规则 1.必须以字母开头. 2.长度不能超过30字符. 3.不能使用Oracle的保留字. 4.只能使用如下字符 A-Z,a-z,0-9,$,#等. 二.Oracle支持的数据类型 ...

  7. sass 使用入门教程

    我们都知道,css没有变量,也没有条件语句,在开发过程中,难免有些麻烦,因此有了CSS预处理器(css preprocessor),Sass便是其中之一. 一.什么是Sass Sass (Syntac ...

  8. webViewDidFinishLoad因为网页里的重定向，会调用多次，使用web view.isLoading来解决

    我编码如下,但我发现 webViewDidFinishLoad() 会发生若干次. 如何知道 webViewDidFinishLoad() 最后发生吗? iNavigate = ; - (void)w ...

  9. C++ 构造和析构

    1.继承关系可认为,子类在父类的基础上进行.从这个角度讲,可把它认为穿衣脱衣的过程.穿衣是:先穿内衣,再穿外套.脱衣是:先脱外套,在脱内衣.构造是:先调用父类构造方法,再调用子类构造方法.析构是:先调 ...

  10. jQuery操作select option

    jQuery获取Select选择的Text和Value: 1. var checkText=jQuery("#select_id").find("option:selec ...