书籍名称：HTML5-Animation-with-JavaScript

书籍源码：https://github.com/lamberta/html5-animation

1.canvas的context

var canvas = document.getElementById('canvas'),

 context = canvas.getContext('2d');

第一句是获取canvas节点。

第二句是获取一个 CanvasRenderingContext2D 对象,绘画功能如clearRect，lineTo等都是这个对象的属性.（getContext目前只支持2d）。

2.清除绘画

context.clearRect(x, y, width, height)  

前两个属性是开始的坐标，后两个是结束的坐标，目标函数的作用就是清空这两个点构成的正方形。如先前使用，实际就是清空整个画板。
context.clearRect(0, 0, canvas.width, canvas.height);

3.画笔样式

strokeStyle：用来设置颜色，可以是CSS颜色值属性，可以是渐变，可以是图案，默认#000000。

lineWidth：画笔大小，默认为1.

lineCap：线冒，线两端的样子，三个属性butt,round,square.默认是butt。(http://www.w3school.com.cn/tiy/t.asp?f=html5_canvas_linecap)

lineJoin: 线交汇处，两条线交汇的样子，三个属性round,bevel,miter，默认miter(http://www.w3school.com.cn/tiy/t.asp?f=html5_canvas_linejoin)

miterLimit:lineJoin设置为miter时，控制这个miter的长度限制，当超出这个长度显示为bevel(http://www.w3school.com.cn/tiy/t.asp?f=html5_canvas_miterlimit)

4.lineTo和moveTo

完整的画一条线的代码是这样的，第一句beginPath()，开始路径绘画，第二句，moveTo将坐标移动到七点；第三句生成一条直接到坐标100,100,第四局，stroke对先前生成的内容在canvas上显示。

var canvas = document.getElementById('canvas'),

context = canvas.getContext('2d');

context.beginPath();

context.moveTo(0, 0);

context.lineTo(100, 100);

context.stroke();

创建一个绘画程序

01-drawing-app.html

<!doctype html>

<html>

  <head>

    <meta charset="utf-8">

    <title>Drawing App</title>

    <link rel="stylesheet" href="../include/style.css">

  </head>

  <body>

    <header>

      Example from <a href="http://amzn.com/1430236655?tag=html5anim-20"><em>Foundation HTML5 Animation with JavaScript</em></a>

    </header>

    <canvas id="canvas" width="400" height="400"></canvas>

    <aside>Click and draw with the mouse.</aside>

    <script src="../include/utils.js"></script>

    <script>

    window.onload = function () {

      var canvas = document.getElementById('canvas'),

          context = canvas.getContext('2d'),

          mouse = utils.captureMouse(canvas);

      canvas.addEventListener('mousedown', function () {

        context.beginPath();

        context.moveTo(mouse.x, mouse.y);

        canvas.addEventListener('mousemove', onMouseMove, false);

      }, false);

      canvas.addEventListener('mouseup', function () {

        canvas.removeEventListener('mousemove', onMouseMove, false);

      }, false);

      function onMouseMove () {

        context.lineTo(mouse.x, mouse.y);

        context.stroke();

      }

    };

    </script>

  </body>

</html>

5.

动画原理——绘画API的更多相关文章

  1. iOS动画原理

    1. iOS动画原理 本质:动画对象(这里是UIView)的状态,基于时间变化的反应 分类:可以分为显式动画(关键帧动画和逐帧动画)和隐式动画 关键帧和逐帧总结:关键帧动画的实现方式,只需要修改某个属 ...

  2. js中动画原理

    现如今,许多页面上均有一些动画效果.适当的动画效果可以在一定程度上提高页面的美观度,具有提示效果的动画可以增强页面的易用性. 实现页面动画的途径一般有两种. 一种是通过操作JavaScript间接操作 ...

  3. Atitit 视频编码与动画原理attilax总结

    Atitit 视频编码与动画原理attilax总结 1.1. 第一步:实现有损图像压缩和解压1 1.2. 接着将其量化,所谓量化,就是信号采样的步长,1 1.3. 第二步:实现宏块误差计算2 1.4. ...

  4. SVG描边动画原理

    SVG描边动画原理其实很简单,主要利用以下两个属性 stroke-dasharray 制作虚线,使得黑白相间, stroke-dashoffset 使得虚线向开头偏移,这里的1500不精确,是我随便取 ...

  5. JS实现动画原理一（闭包方式）

    前提:      你必须了解js的闭包(否则你看不懂滴)     我们就来做一个js实现jq animate的动画效果来简单探索一下,js动画实现的简单原理: html代码 <div id=&q ...

  6. Unity3D 骨骼动画原理学习笔记

    最近研究了一下游戏中模型的骨骼动画的原理,做一个学习笔记,便于大家共同学习探讨. ps:最近改bug改的要死要活,博客写的吭哧吭哧的~ 首先列出学习参考的前人的文章,本文较多的参考了其中的表述: 1. ...

  7. JS 实现无缝滚动动画原理（初学者入）

    这段时间在教培训班的学生使用原生javascript实现无缝滚动的动画案例,做了这个原理演示的动画,分享给自学JS的朋友!博主希望对你们有帮助! 在讲解之前先看一下demo: demo:https:/ ...

  8. OpenGL10-骨骼动画原理篇(3)-Shader版本代码已经上传

    视频教程请关注 http://edu.csdn.net/lecturer/lecturer_detail?lecturer_id=440 接上一个例程OpenGL10-骨骼动画原理篇(2),对骨骼动画 ...

  9. OpenGL10-骨骼动画原理篇(2)

    接上一篇的内容,上一篇,简单的介绍了,骨骼动画的原理,给出来一个 简单的例程,这一例程将给展示一个最初级的人物动画,具备多细节内容 以人走路为例子,当人走路的从一个站立开始,到迈出一步,这个过程是 一 ...

随机推荐

  1. 【HDU 4452 Running Rabbits】简单模拟

    两只兔子Tom和Jerry在一个n*n的格子区域跑,分别起始于(1,1)和(n,n),有各自的速度speed(格/小时).初始方向dir(E.N.W.S)和左转周期turn(小时/次). 各自每小时往 ...

  2. 安装android studio时，解决unable to access android sdk add-on list

    1.打开时提示如下错误. 2.在安装路径下找到idea.properties文件,用记事本打开,添加disable.android.first.run=true,保存即可. 3.再次打开Android ...

  3. 每日一小练——Eratosthenes 筛选法

    上得厅堂.下得厨房,写得代码.翻得围墙,欢迎来到睿不可挡的每日一小练! 题目:Eratosthenes筛选法 内容: 求质数是一个非常普遍的问题,通常不外乎用数去除.除到不尽时,给定的数就是质数.可是 ...

  4. Android 多线程：使用Thread和Handler (从网络上获取图片)

    当一个程序第一次启动时,Android会同时启动一个对应的主线程(Main Thread),主线程主要负责处理与UI相关的事件,如:用户的按键事件,用户接触屏幕的事件以及屏幕绘图事件,并把相关的事件分 ...

  5. Mps与Mrp区别

    MPS是完成品的计划表,描述一个特定的完成品的生产时间和生产数量.MPS是一个决定完成品生  产排程及可答应量(ATP)的程序.依据MPS,MRP得以计算在该完成品需求之下,所有组件,零件以  至原材 ...

  6. HTML5 canvas 绘制精美的图形

    HTML5 是一个新兴标准,它正在以越来越快的速度替代久经考验的 HTML4.HTML5 是一个 W3C “工作草案” — 意味着它仍然处于开发阶段 — 它包含丰富的元素和属性,它们都支持现行的 HT ...

  7. SSAS中CUBE行权限数据级权限控制

    去年做了一个数据仓库的项目,其中涉及到了CUBE数据级权限的控制.在网上找这方面的资料,找到一个[BI] 通用数据级权限控制解决方案的实现(二):Cube中的角色设置与数据级权限控制.根据这个大牛的思 ...

  8. java中，Date数据类型和JSONObject数据类型之间的转换

    import java.text.SimpleDateFormat;import java.util.Date;import net.sf.json.JSONObject; public class ...

  9. Oracle触发器Trigger基础1

    /* Trigger是作用在表上,或是数据库上,或是用户上.当用户在表上(其他)做某些操作时,trigger将会自己执行. 可以在表上:insert,update,delete Trigger只对表的 ...

  10. JavaScript中的this引用

    在JavaScript的学习当中,this关键字的出现频率可不低,所以想想有必要对this关键字做一个总结.在总结过程中,参考的资料来源于书本及网上. 一.定义 1.this是函数内部的一个特殊对象( ...