HTML day 05-CSDN博客

<canvas id="canvas" width="400px" height="300px">
			文字
		</canvas>
		<script>
			var canvas = document.getElementById("canvas");
			var context = canvas.getContext('2d');
			context.moveTo(10, 100);
			context.lineTo(30, 10);
			context.lineTo(50, 100);
			context.lineTo(70, 10);
			context.lineTo(90, 100);
			context.strokeStyle="red"
			context.lineWidth="5"
			context.stroke();
		</script>

2.3线条样式

线条宽度：context.lineWidth = 10

描边颜色：context.strokeStyle = 'red'

断点形状：linCap：

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

2.4线条的路径

重置路径：beginPath()

	<canvas id="a" width="400px" height="300px">
			文字
		</canvas>
		<script>
			var canvas = document.getElementById("a");
			var context = canvas.getContext('2d');
			context.moveTo(0, 10);
			context.lineTo(100,10)
			context.stroke();
			context.beginPath()
			context.moveTo(0, 100);
			context.lineTo(100,100)
			context.stroke();
		</script>

闭合路径：closePath()

	<canvas id="b" width="400px" height="300px">
			文字
		</canvas>
		<script>
			var canvas = document.getElementById("b");
			var context = canvas.getContext('2d');
			context.beginPath()
			context.moveTo(20, 20);
			context.lineTo(20,100);
			context.lineTo(70,100);
			context.closePath();
			context.stroke();
			context.fillStyle="blue"
			context.fill()
		</script>

canvas 绘制图形的基本步骤：

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

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

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

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

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

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

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

3 Canvas 常用方法

3.1canvas 绘制矩形

fillRect(x,y,width,height) 方法定义了矩形当前的填充方式。

3.2canvas 绘制圆形

arc(x, y, r, start, stop)

3.3canvas 绘制椭圆

ellipse(x, y, radiusX, radiusY, rotation, startAngle, endAngle, anticlockwise)

参数分别是：（椭圆圆心x坐标, 椭圆圆心y坐标, 半径x, 半径y, 旋转的角度, 起始角, 结束角, 顺时针/逆时针）

3.4canvas 绘制文本

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

3.5canvas 渐变

createLinearGradinet(x,y,x1,y1):线条渐变

createRadialGradinet(x,y,r,x1,y1,r1):径向/圆渐变

4.SVG 简介

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

HTML5 支持内联 SVG。

HTML <svg> 元素是 SVG 图形的容器。

SVG 有多种绘制路径、框、圆、文本和图形图像的方法。

4.1绘制矩形

x/y：绘图位置，
width/height：矩形长宽，
fill：填充颜色，默认黑色，
stroke：描边的颜色。
stroke-width：描边的宽度。
rx/ry：描边的圆角。

<svg width="500" height="500">
	  	  <rect x="100" y="10" width="100" height="100" rx="50"></rect>
</svg>

4.2 绘制圆

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

4.3绘制椭圆

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