#1. HTML5 Canvas

##1.1. What is Canvas?

  • The HTML5 <canvas> element通过一些脚本（javascript）来画图，
  • <canvas> element是一个画图容器，必须使用一种脚本来亲自画图
  • 画布有一些画 paths, boxes, circles, text, and adding images的方法

##1.2. Create a Canvas

  1. 画布是html网页上一个矩形的区域，通过<canvas> element说明
  2. Note：默认画布是没有边界的空白区域
  3. 使用形式： <canvas id="myCanvas" width="200" height="100"></canvas>
  4. 可以在网上使用多个画布，
1
2
3
<canvas id="myCanvas" width="200" height="100" style="border:1px solid #000000;"><!--style属性可以定义画布的边框-->
Your browser does not support the HTML5 canvas tag.
</canvas>

##1.2. Draw Onto The Canvas With JavaScript

1
2
3
4
5
6
7
8
9
10
11
12
<canvas id="myCanvas" width="200" height="100" style="border:1px solid #c3c3c3;">
Your browser does not support the HTML5 canvas tag.
</canvas>
<script><!--插入JavaScript代码-->
var c = document.getElementById("myCanvas");//找到画布元素
var ctx = c.getContext("2d"); //调用getContext()函数，返回内建的html5对象
ctx.fillStyle = "#FF0000"; // 其属性可以是a CSS color, a gradient, or a pattern
ctx.fillRect(0,0,150,75);//画出一个矩形
</script>

##1.3. Canvas Coordinates坐标

  • 画布是二维网格
  • 左上角的坐标为(0,0) ，所以fillRect() method的参数是(0,0,150,75)，意思是：从左上角的（0,0）开始画一个150*75的点阵矩形

##1.4. Canvas - Paths
在画布上画直线， 我们可以使用以下两个方法：

  1. moveTo(x,y)定义了直线的起点，lineTo(x,y)定义了直线的终点，画出直线必须使用ink方法， 例如：stroke()
1
2
3
4
5
6
7
8
9
10
11
12
<canvas id="myCanvas" width="200" height="100" style="border:1px solid #d3d3d3;">
Your browser does not support the HTML5 canvas tag.</canvas>
<script>
var c = document.getElementById("myCanvas");
var ctx = c.getContext("2d");
ctx.moveTo(0,0);
ctx.lineTo(200,100);
ctx.stroke();
</script>

在画布上画圆，我们会使用下面的方法：
arc(x,y,r,start,stop)
必须使用一个ink方法， 例如：stroke() or fill().

1
2
3
4
5
6
7
8
9
10
11
12
<canvas id="myCanvas" width="200" height="100" style="border:1px solid #d3d3d3;">
Your browser does not support the HTML5 canvas tag.</canvas>
<script>
var c = document.getElementById("myCanvas");
var ctx = c.getContext("2d");
ctx.beginPath();
ctx.arc(95,50,40,0,2*Math.PI);
ctx.stroke();
</script>

##1.5. Canvas - Text
在画布上画文本， 最重要的属性和方法是：
font- 定义文字的字体
fillText(text,x,y) - 在画布上填充文本
strokeText(text,x,y) - 在画布下画文本（不填充）

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
<canvas id="myCanvas" width="200" height="100" style="border:1px solid #d3d3d3;">
Your browser does not support the HTML5 canvas tag.</canvas>
<script>
var c = document.getElementById("myCanvas");
var ctx = c.getContext("2d");
ctx.font = "30px Arial";
ctx.fillText("Hello World",10,50);   <!--使用 fillText()-->
</script>
<canvas id="myCanvas" width="200" height="100" style="border:1px solid #d3d3d3;">
Your browser does not support the HTML5 canvas tag.</canvas>
<script>
var c = document.getElementById("myCanvas");
var ctx = c.getContext("2d");
ctx.font = "30px Arial";
ctx.strokeText("Hello World",10,50); <!--使用 strokeText() ,文字的笔画是中空的-->
</script>

##1.6. Canvas - Gradients梯度

  1. 梯度可用于填充rectangles, circles, lines, text, etc，不限于纯色
    有两种不同类型的梯度：
    createLinearGradient(x,y,x1,y1)创建一个线性的梯度
    createRadialGradient(x,y,r,x1,y1,r1)创建一个环形梯度
  2. 一旦我们有一个梯度对象，我们必须增加两个或者更多色块
  3. addColorStop() method指明色块，位置沿着梯度，梯度可以在0到1指尖的任意的数字
  4. 要使用梯度， 要设置fillStyle or strokeStyle的属性，然后画出形状，
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
// createLinearGradient()
<canvas id="myCanvas" width="200" height="100" style="border:1px solid #d3d3d3;">
Your browser does not support the HTML5 canvas tag.</canvas>
<script>
var c = document.getElementById("myCanvas");
var ctx = c.getContext("2d");
// Create gradient
var grd = ctx.createLinearGradient(0,0,200,0);
grd.addColorStop(0,"red");
grd.addColorStop(1,"white");
// Fill with gradient
ctx.fillStyle = grd;
ctx.fillRect(10,10,150,80);
</script>
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
//createRadialGradient()
<canvas id="myCanvas" width="200" height="100" style="border:1px solid #d3d3d3;">
Your browser does not support the HTML5 canvas tag.</canvas>
<script>
var c = document.getElementById("myCanvas");
var ctx = c.getContext("2d");
// Create gradient
var grd = ctx.createRadialGradient(75,50,5,90,60,100);
grd.addColorStop(0,"red");
grd.addColorStop(1,"white");
// Fill with gradient
ctx.fillStyle = grd;
ctx.fillRect(10,10,150,80);

##1.7. Canvas - Images
To draw an image on a canvas, we will use the following method:

drawImage(image,x,y)

在画布上画图，我们使用下面的方法 ：drawImage(image,x,y)

1
2
3
4
5
6
7
8
9
10
11
12
13
<p>Image to use:</p>
<img id="scream" src="img_the_scream.jpg" alt="The Scream" width="220" height="277"><p>Canvas:</p>
<canvas id="myCanvas" width="250" height="300" style="border:1px solid #d3d3d3;">
Your browser does not support the HTML5 canvas tag.</canvas>
<script>
var c = document.getElementById("myCanvas");
var ctx = c.getContext("2d");
var img = document.getElementById("scream");
ctx.drawImage(img,10,10);
</script>

HTML Canvas Reference

#2. HTML5 SVG

##2.1. What is SVG?

  1. SVG表示可伸缩矢量图形（Scalable Vector Graphics）
  2. SVG用于定义网络中的矢量图
  3. SVG在XML格式中定义图像
  4. SVG图像在被缩放或者修改的时候不会失真
  5. SVG文件中的每个元素或属性都可以是动态的
  6. SVG是W3C建议标准

##2.2. SVG Advantages
图像格式使用SVG的优点：

  1. SVG图片可以在任何编辑器中创建和打开
  2. SVG图片可被搜索，索引，改变和压缩
  3. SVG图片是动态的
  4. SVG图片在任何情况下都能以高质量打印
  5. SVG是可伸缩的不会失真

##2.3. Embed SVG Directly Into HTML Pages

1
2
3
4
5
<svg width="300" height="200">
   <polygon points="100,10 40,198 190,78 10,78 160,198"
   style="fill:lime;stroke:purple;stroke-width:5;fill-rule:evenodd;" />
   Sorry, your browser does not support inline SVG.
</svg>