canvas绘图、svg绘图

一，canvas绘图

1，canvas标签

在网页中创建一个画布

<canvas id="canvas" width="400" height="300"> </canvas>
<script>
var canvas = document.getElementById("canvas");
//绘制环境
var context = canvas.getContext('2d');

</script>

2，绘制线条

初始位置：moveTo( x,y )

连接端点：lineTo( x,y)

描边：通过初始位置和连线端点可以绘制一条线，但这条线并不能被看到。这时我们需要为线添加描边，让线变得可见。使用stroke()方法

<canvas width="500px" height="300px" id="canvas"></canvas>
 <script>
        var canvas = document.getElementById("canvas")
        var context = canvas.getContext("2d")
        //初始位置
        context.moveTo(x,y)
        //连接端点
        context.lineTo(x,y)
        //描边
        context.stroke()
    </script>

3，线条样式

线条宽度 lineWidth

线条颜色  strokeStyle

端点形状 lineCap

lineCap 属性的取值有3个：

• butt（默认值）：默认效果，无端点，显示直线方形边缘

• round：显示圆形端点

• square：显示方形端点

填充颜色 fillStyle

 颜色填充 fill()

 <canvas width="500px" height="300px" id="canvas"></canvas>
    <script>
        var canvas = document.getElementById("canvas")
        var context = canvas.getContext("2d")
        context.moveTo(10, 10)
        context.lineTo(10, 200)
        context.lineTo(150, 200)
        //背景颜色
        context.fillStyle = "yellow"
        //背景填充
        context.fill()
        //边框颜色
        context.strokeStyle = "red"
        context.stroke()

    </script>

4，线条的路径

重置路径

在同一画布中，即使我们添加再多的连线端点也只能有一条路径，如果想要开始新的路径就需要使用beginPath()方法，当出现beginPath()时即表示路径重新开始。

<canvas width="500px" height="300px" id="canvas"></canvas>
    <script>
        var canvas = document.getElementById("canvas")
        var context = canvas.getContext("2d")
        context.moveTo(10, 10)
        context.lineTo(200, 10)
        context.stroke()
        // 新建一条路径beginPath()
        context.beginPath()
        context.moveTo(10, 50)
        context.lineTo(200, 50)
        context.stroke()
    </script>

闭合路径

闭合路径就是将我们绘制的开放路径进行封闭处理，多点的路径闭合后会形成特定的形状。在画布中使用closePath()方法闭合路径。

<canvas width="500px" height="300px" id="canvas"></canvas>
    <script>
        var canvas = document.getElementById("canvas")
        var context = canvas.getContext("2d")
        context.moveTo(10, 10)
        context.lineTo(10, 200)
        context.lineTo(150, 200)
        // 闭合路径
        context.closePath()
        context.stroke()

    </script>

 5，canvas绘制图形基本步骤

① 创建画布：<canvas></canvas>

② 准备画笔（获取上下文对象）：canvas.getContext('2d');

③ 开始路径规划 ：context.beginPath();

④ 移动起始点 ：context.moveTo(x, y);

⑤ 绘制线（矩形、圆形、图片...）：context.lineTo(x, y);

⑥ 闭合路径：context.closePath();

⑦ 绘制描边 ：context.stroke();

二，canvas常用方法

绘制图形	方法	描述
矩形	rect()	创建矩形。
	fillRect()	绘制带填充的矩形。
	strokeRect()	绘制无填充的矩形。
	clearRect()	在给定的矩形内清除指定的像素。
圆形	arc()	创建圆形。
椭圆形	ellipse()	创建椭圆形。
文本	strokeText()	绘制空心文本。
	fillText()	绘制实心文本。
图像	drawImage()	绘制图像。

 1，绘制矩形

        <canvas id="canvas" width="400" height="300">
			您的浏览器不支持canvas标签，请更新浏览器
		</canvas>
		<script>
			var canvas = document.getElementById('canvas');	// 获取canvas标签
			var context = canvas.getContext('2d');			// 获得context对象
            
			context.fillStyle = 'red';						// 设置填充颜色
			context.fillRect(0,0,200,100);					// 绘制填充的矩形
		</script>

2，绘制圆形

<canvas id="canvas" width="400" height="300">
			您的浏览器不支持canvas标签，请更新浏览器
</canvas>
<script>
    var canvas = document.getElementById('canvas');	// 获取canvas标签
    var context = canvas.getContext('2d');			// 获得context对象
    
    context.arc(100, 100, 50, 0, 360 * Math.PI / 180);	// 绘制圆形
    context.stroke();	// 描边
</script>

3，绘制椭圆

<canvas id="canvas" width="400" height="300">
			您的浏览器不支持canvas标签，请更新浏览器
</canvas>
<script>
    var canvas = document.getElementById('canvas');	// 获取canvas标签
    var context = canvas.getContext('2d');			// 获得context对象
    
    context.ellipse(120, 100, 100, 50, 0, 0, 360 * Math.PI / 180);	// 绘制椭圆
	context.stroke();	// 描边
</script>

4，渐变

有两种方式来设置 Canvas 渐变：

• createLinearGradient(x, y, x1, y1)：创建线条渐变；

• createRadialGradient(x, y, r, x1, y1, r1)：创建一个径向/圆渐变。

<canvas id="canvas" width="400" height="300">
			您的浏览器不支持canvas标签，请更新浏览器
</canvas>
<script>
    var canvas = document.getElementById('canvas');	// 获取canvas标签
    var context = canvas.getContext('2d');			// 获得context对象
    
    var gradient = context.createLinearGradient(0, 0, 200, 0);	// 创建渐变
	gradient.addColorStop(0, 'red');		// 设置渐变颜色（开始）
	gradient.addColorStop(1, 'green');	// 设置渐变颜色（结束）
	context.fillStyle = gradient;				// 设置渐变填充样式
	context.fillRect(10, 10, 200, 80);	// 绘制矩形
</script>

 

三，SVG绘制基本图形

SVG 英文全称为 Scalable Vector Graphics，意思为可缩放的矢量图。

1，绘制矩形

使用 rect 标签，主要属性：

• x/y：绘图位置，

• width/height：矩形长宽，

• fill：填充颜色，默认黑色，

• stroke：描边的颜色。

• stroke-width：描边的宽度。

• rx/ry：描边的圆角。

• <svg width="500" height="500">
  	<rect x="100" y="100" width="150" height="100" fill="red" stroke="green" stroke-width="2" rx="10"></rect>
  </svg>

  2，绘制圆

• 使用专门的标签circle 绘制，主要属性：

• cx/cy：圆绘制的位置，圆心位置。

• r：圆的半径。

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

3,绘制椭圆

使用专门的标签ellipse 绘制，主要属性：

• cx/cy：椭圆绘制的位置，圆心的位置。

• rx/ry：椭圆的半径。

<svg width="500" height="500">
   <ellipse cx="150" cy="400" rx="50" ry="25"></ellipse>
</svg>

 四，SVG绘制多边

1，绘制直线

• x1/y1：起点

• x2/y2：终点

• stroke：线条颜色，必须有

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

2，绘制折线

• points：设置所有折线的点。

• fill：是否填充，默认填充。

<svg width="500" height="500">
	<polyline points="100 150 300 150 300 200" stroke="red" fill="none"></polyline>
</svg>

3，绘制多边形

polygon 会自动关闭路径。

<svg width="500" height="500">
	<polygon points="100 400 300 400 300 450" stroke="red" fill="none"></polygon>
</svg>