Canvas绘图和SVG绘图

SVG：

1.基本使用方法

<svg width="100%" height="100%">

<circle id="mycircle" cx="50" cy="50" r="50" fill="pink"></circle>

</svg>

2. circle 圆形

<circle cx="20" cy="40" r="5"/>

• cx 圆心的X坐标

• cy圆心的Y坐标

3. line 直线

<line x1="40" y1="0" x2="40" y2="10" stroke="black" stroke-width="0.1"/>

4. polyline 折线

<polyline points="45,0 50,0 50,15 40,15 45,0" fill="transparent" stroke="black"/>

points属性指定了每个端点的坐标，横坐标与纵坐标之间与逗号分隔，点与点之间用空格分隔

5. rect 矩形

<rect x="10" y="10" width="20" height="10" style="transform-box:fill-box;transform-origin:center" transform="scale(2) rotate(45)"/>

<rect>的x属性和y属性，指定了矩形左上角端点的横坐标和纵坐标 ；width属性和height属性指定了矩形的宽度和高度(单位像素)。

6. ellipse 椭圆

<ellipse cx="40" cy="50" rx="10" ry="5"/>

7. polygon 多边形

<polygon points="0,0 10,0 20,5 5,10"/>

多边形是由直线组成，其形状是"封闭"的

8. path 绘制路径

<path d="M 18,3 L 46,3,L 46,40,L 61,40 L 32,68 L 3,40 L 18,40 Z"></path>

<path>的 d 属性表示绘制顺序，它的值是一个长字符串，每个字母表示一个绘制动作，后面跟着坐标。

9. text 文本

<text x="60" y="50" style="font-size: 4;">hello</text>

10. SVG通用属性

• fill 定义形状和文本的填充色

• stroke 描边色，形状的边框颜色以及文本的外轮廓颜色

• stroke-width 边框宽度以及文本的外轮廓宽度

• stroke-linecap 定义不同类型的开放路径的端点样式

• stroke-dasharray 用于创建虚线

Canvas：

1. 创建 Canvas 元素

<canvas id="myCanvas" width="300" height="300"></canvas>

2. 设置画布类型

<canvas> 会创建一个固定大小的画布，会公开一个或多个渲染上下文(画笔)，使用渲染上下文来绘制和处理要展示的内容。 我们重点研究 2D 渲染上下文。

var myCanvas = document.getElementById('myCanvas');

var ctx = myCanvas.getContext('2d');

3. 线条

• moveTo(x,y) 画笔开始位置 x和y定义线条开始点坐标

• lineTo(x,y) 画笔经过的位置 x和y定义线条结束点坐标

4. 矩形

<canvas> 只支持一种原生的图形绘制：矩形。所有其他图形都至少需要生成一种路径 (path)。不过，我们拥有众多路径生成的方法让复杂图形的绘制成为了可能。

canvas 提供了四种方法绘制矩形：

• rect(x, y, width, height)： 创建矩形。

• fillRect(x, y, width, height)：绘制一个填充的矩形。

• strokeRect(x, y, width, height)：绘制一个矩形的边框（无填充）。

• clearRect(x, y, widh, height)：清除指定的矩形区域，然后这块区域会变的完全透明。

说明：这 3 个方法具有相同的参数。

• x, y：指的是矩形的左上角的坐标。(相对于canvas的坐标原点)

• width, height：指的是绘制的矩形的宽和高

5. 绘制文本

两种方法来渲染文本

fillText(text, x, y [, maxWidth])

strokeText(text, x, y [, maxWidth])

6. 绘制路径

• 创建路径起始点

  • beginPath() 新建一条路径，路径一旦创建成功，图形绘制命令被指向到路径上生成路径

• 调用绘制方法去绘制出路径

  • moveTo(x, y) 把画笔移动到指定的坐标(x, y)。相当于设置路径的起始点坐标。

• lineTo(x, y) 把画笔移动到指定的坐标(x, y)。相当于设置路径的结束点坐标。

• 把路径封闭

  • closePath() 闭合路径之后，图形绘制命令又重新指向到上下文中

• 一旦路径生成，通过描边或填充路径区域来渲染图形。

  • stroke() 通过线条来绘制图形轮廓

  • fill() 通过填充路径的内容区域生成实心的图形

 

7. 设置颜色

如果想要给图形上色，有两个重要的属性可以做到。

1. fillStyle = color 设置图形的填充颜色

2. strokeStyle = color 设置图形轮廓的颜色

注意：

• color 可以是表示 css 颜色值的字符串、渐变对象

• 默认情况下，线条和填充颜色都是黑色

• 一旦设置了 strokeStyle 或者 fillStyle 的值，那么这个新值就会成为新绘制的图形的默认值。如果要给每个图形上不同的颜色，需要重新设置 fillStyle 或 strokeStyle 的值。

小结：

属性	描述
fillStyle	设置或返回用于填充绘画的颜色、渐变或模式
strokeStyle	设置或返回用于笔触的颜色、渐变或模式
shadowColor	设置或返回用于阴影的颜色
shadowBlur	设置或返回用于阴影的模糊级别
shadowOffsetX	设置或返回阴影距形状的水平距离
shadowOffsetY	设置或返回阴影距形状的垂直距离