canvas渐变与SVG

1.1 canvas绘制文本

使用canvas绘制文本，重要的属性和方法如下：

• font-定义字体
• fillText(text,x,y) -在 canvas上绘制实心的文本
• strokeText(text,x,y)-在canvas上绘制空心的文本

示例图片： 

示例代码:

<script type="text/javascript">
    /** @type {HTMLCanvasElement} */
    // 1.获取画布
    var canvas = document.getElementById("canvas");
    // 2.创建画布上下文对象
    var context = canvas.getContext("2d");
    // 3.设置文本样式
    context.font = "30px Arial";
    // 3.绘制文本
    var radial = context.createRadialGradient(100,100,20,100,100,80);
    radial.addColorStop(0.5,"red");
    radial.addColorStop(0.8,"orange");
    context.fillStyle = radial;
    // 绘制实心文本
    context.fillText("Hello World",30,50);
</script>

1.2 canvas渐变

渐变可以填充在矩形,圆形,线条,文本等等,各种形状可以自己定义不同的颜色。

以下有两种不同的方式来设置canvas渐变：

• createLinearGradient(x,y,x1,y1) - 创建线条渐变，x表示渐变开始的x坐标，y表示渐变开始的y坐标，x1表示渐变结束的x坐标，y1表示渐变结束的y坐标。
• createRadialGradient(x,y,r,x1,y1,r1) - 创建一个径向/圆渐变。

 当我们使用渐变对象,必须使用两种或两种以上的停止颜色。

addColorStop()方法指定颜色停止，参数使用坐标来描述，可以是0至1。

使用渐变，设置fillStyle或strokeStyle的值为渐变，然后绘制形状，如矩形，文本，或一条线。

①使用createLinearGradient()，创建一个线性渐变。使用渐变填充矩形：

示例图片：

实例代码：

<canvas id="canvas" width="1000" height="1000"></canvas>
<script type="text/javascript">
    /** @type {HTMLCanvasElement} */
    // 1.获取画布
    var canvas = document.getElementById("canvas");
    // 2.创建画布上下文对象
    var context = canvas.getContext("2d");
    // 3.beginPath()
    context.beginPath();
    // 4.设置样式
    // 创建渐变对象
    var linear = context.createLinearGradient(0,0,400,20);
    // 添加渐变颜色
    linear.addColorStop(0,"red");
    linear.addColorStop(0.6,"yellow");
    linear.addColorStop(1,"green");
    // 设置矩形的填充色
    context.fillStyle=linear;
    // 5.绘制图形
    context.fillRect(100,100,300,200);
</script>

 ②使用createRadialGradient()，创建一个径向渐变。使用渐变填充圆形：

 实例图片：

 实例代码：

<canvas id="canvas" width="1000" height="1000"></canvas>
<script type="text/javascript">
    /** @type {HTMLCanvasElement} */
    // 1.获取画布
    var canvas = document.getElementById("canvas");
    // 2.创建画布上下文对象
    var context = canvas.getContext("2d");
    // 3.beginPath()
    context.beginPath();
    // 4.设置样式
    // 创建渐变对象
    // 绘制圆渐变
    var radial = context.createRadialGradient(210,210,20,210,210,180);
    // 添加渐变颜色
    radial.addColorStop(0,"red");
    radial.addColorStop(0.4,"orange");
    radial.addColorStop(0.8,"yellow");
    radial.addColorStop(1,"green");
    // 绘制圆
    context.arc(210,210,200,0,Math.PI*2);
    // 设置矩形的填充色
    context.fillStyle = radial;
    context.fill();
</script>

1.3 SVG

1.3.1 了解SVG概念

•  SVG英文全称为Scalable Vector Graphics，意思为可缩放的矢量图。
• HTML5支持内联SVG。
• HTML <svg>元素是SVG图形的容器。
• SVG有多种绘制路径、框、圆、文本和图形图像的方法。

1.3.2 什么是SVG？

• SVG指可伸缩矢量图形(Scalable Vector Graphics)
• SVG 用于定义用于网络的基于矢量的图形
• SVG使用XML格式定义图形
• SVG图像在放大或改变尺寸的情况下其图形质量不会有损失
• SVG是万维网联盟的标准

1.3.3 SVG与Canvas两者间的区别

        SVG是一种使用XML描述2D图形的语言。

        Canvas通过JavaScript来绘制2D图形。

         SVG基于XML，这意味着SVG DOM中的每个元素都是可用的。您可以为某个元素附加JavaScript事件处理器。

        在SVG中，每个被绘制的图形均被视为对象。如果SVG对象的属性发生变化,那么浏览器能够自动重现图形。

        Canvas是逐像素进行渲染的。在canvas中，一旦图形被绘制完成，它就不会继续得到浏览器的关注。如果其位置发生变化，那么整个场景也需要重新绘制,包括任何或许已被图形覆盖的对象

        Canvas 与SVG的比较: 

Canvas	SVG
依赖分辨率	不依赖分辨率
不支持事件处理器	支持事件处理器
弱的文本渲染能力	最适合带有大型渲染区域的应用程序（比如谷歌地图)
能够以.png 或.jpg格式保存结果图像	复杂度高会减慢渲染速度（任何过度使用DOM的应用都不快)
最适合图像密集型的游戏，其中的许多对象会被频繁重绘	不适合游戏应用

1.4 使用SVG绘制基本图形

1.4.1 绘制矩形

使用rect标签，主要属性：

•  x/y:绘图位置
• . width/height：矩形长宽
• fill：填充颜色、默认黑色
• stroke：描边的颜色
• stroke-width：描边的宽度
• rx/ry：圆角:以10为半径画圆

 如下绘制的圆角矩形:

示例图片：

示例代码：

<svg width="500" height="500">
    <rect x="30" y="30" width="200" height="200" fill="none" stroke="green" stroke-width="5" rx="50" ry="50"></rect>
</svg>

1.4.2 绘制圆与椭圆

绘制圆

方法一：使用矩形绘制

示例代码：

<svg width="500" height="500">
    <rect x="30" y="30" width="100" height="100" fill="none" stroke="green" stroke-width="5" rx="50"></rect>
</svg>

方法二：使用circle绘制

• x:水平坐标轴
• y:垂直坐标轴
• rx:矩形圆角是以r为半径画的圆

示例代码：

<svg width="500" height="500">
    <circle cx="150" cy="200" r="50"></circle>
</svg>

绘制椭圆

方法一：使用矩形绘制

示例代码：

<svg width="500" height="500">
    <rect x="100" y="300" width="100" height="50" rx="50" ry="25"></rect>
</svg>

方法二：使用ellipse绘制

• cx/cy:椭圆绘制的位置,圆心的位置
• rx/ry:椭圆圆的半径

示例代码：

<svg width="500" height="500">
    <ellipse cx="200" cy="200" rx="100" ry="50"></ellipse>
</svg>

1.4.3 绘制直线、折线、多边形

绘制直线：

• x1/y1:起点
• x2/y2:终点
• stroke:线条颜色，必须有

示例代码：

<svg width="500" height="500">
    <line x1="0" y1="0" x2="100" y2="100" stroke="red"></line>
</svg>

绘制折线：

• points:设置所有折线的点
• fill:是否填充。默认填充

示例代码：

<svg width="500" height="500">
    <polyline points="0,0,0,100,50,100" stroke="green" fill="none"></polyline>
</svg>

绘制多边形：

示例代码：

<svg width="500" height="500">
    <polygon points="200 0 200 100 300 100 200 0" stroke="green" fill="none"></polygon>
</svg>

1.5 SVG动画

1.5.1 svg动画常用属性

SVG动画属性

• attributeType：CSS/XML规定的属性值的名称空间
• attributeName：规定元素的哪个属性会产生动画效果
• from/to：从哪到哪
• dur:动画时长
• fill:动画结束之后的状态,保持freeze结束状态/remove回复初始状态

示例：半径从50~100，颜色由红变为绿变化的圆

示例代码：

<svg width="500" height="500">
    <circle id="mycircle" cx="100" cy="100" r="5">
        <animate attributeType="XML"
            attributeName="r"
            from="0" to="100"
            dur="5"
            fill="freeze"
            repeatCount="indefinite">
        </animate>
        <animate attributeType="XML"
            attributeName="fill"
            from="red" to="green"
            dur="5"
            fill="freeze">
        </animate>
    </circle>
</svg>

1.5.2 复合动画

利用复合动画实现一个点击触发无限往返效果

示例代码：

<svg width="500" height="500">
    <circle id="mycircle" cx="100" cy="100" r="5">
        <animate attributeType="XML"
            attributeName="r"
            from="0" to="100"
            dur="5"
            fill="freeze"
            repeatCount="indefinite"
            begin="click">
        </animate>
        <animate attributeType="XML"
            attributeName="fill"
            from="red" to="green"
            dur="5"
            fill="freeze"
            begin="3">
        </animate>
        <animate attributeType="XML"
            id="toRight"
            attributeName="cx"
            from="100" to="500"
            dur="5"
            fill="freeze"
            begin="click">
        </animate>
        <animate attributeType="XML"
            id="toLeft"
            attributeName="cx"
            from="500" to="100"
            dur="5"
            fill="freeze"
            begin="toRight.end">
        </animate>
    </circle>
</svg>

1.5.3 形态动画

示例代码：

<svg width="500" height="500">
    <circle id="mycircle" cx="100" cy="100" r="5">
        <animate attributeType="XML"
            attributeName="r"
            from="20" to="20"
            dur="5"
            fill="freeze"
            repeatCount="indefinite"
            begin="click">
        </animate>
        <animate attributeType="XML"
            id="toRight"
            attributeName="cx"
            from="100" to="500"
            dur="5"
            fill="freeze"
            begin="click">
        </animate>
        <animate attributeType="XML"
            id="toLeft"
            attributeName="cx"
            from="500" to="100"
            dur="5"
            fill="freeze"
            begin="toRight.end">
        </animate>
    </circle>
</svg>