用js绘图

下面是关于用JS绘图的完整攻略，步骤如下：

步骤一：准备canvas

在HTML页面中创建一个canvas元素。canvas元素是HTML5中新增的元素，用于绘图。我们可以通过canvas元素的getContext()方法在JavaScript中获取绘图环境，进而进行绘图。这里的绘图环境可以是2D绘图环境或者3D绘图环境。下面是一个示例代码：

<canvas id="myCanvas"></canvas>

步骤二：获取绘图环境

在JavaScript中获取绘图环境，这里示例获取的是2D绘图环境，代码如下：

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

步骤三：绘制形状和图像

1. 绘制矩形

用ctx.fillRect(x, y, width, height)方法可以绘制一个实心矩形。x和y是矩形左上角的坐标，width和height是矩形的宽度和高度。下面是一个示例代码：

ctx.fillStyle = 'red';
ctx.fillRect(10, 10, 50, 50);

用ctx.strokeRect(x, y, width, height)方法可以绘制一个空心矩形。下面是一个示例代码：

ctx.strokeStyle = 'blue';
ctx.strokeRect(20, 20, 70, 70);

2. 绘制圆形

用ctx.arc(x, y, r, startAngle, endAngle, anticlockwise)方法可以绘制一个圆形。x和y是圆心的坐标，r是圆的半径，startAngle是起始角度，endAngle是结束角度，anticlockwise表示是否按逆时针方向（默认是按顺时针方向）。下面是一个示例代码：

ctx.beginPath();
ctx.arc(100, 100, 50, 0, Math.PI * 2, true);
ctx.closePath();
ctx.fillStyle = 'green';
ctx.fill();

3. 绘制图片

用ctx.drawImage(image, x, y, width, height)方法可以在canvas上绘制一张图片。image是Image对象或者Canvas对象，x和y是图片左上角的坐标，width和height分别是图片的宽度和高度。下面是一个示例代码：

ctx.drawImage(document.getElementById('myImg'), 10, 10, 200, 200);

步骤四：绘制文字

用ctx.fillText(text, x, y)和ctx.strokeText(text, x, y)方法可以在canvas上绘制文本。text是要绘制的文本内容，x和y分别是文本左下角的坐标。fillText()方法用来绘制实心文字，strokeText()方法用来绘制空心文字。下面是一个示例代码：

ctx.font = '24px Arial';
ctx.fillStyle = '#f00';
ctx.fillText('Hello World', 10, 50);
ctx.strokeStyle = '#00f';
ctx.strokeText('Hello World', 10, 90);

这样，整个用JS绘图的攻略就完成了。以上所有方法都是用2D绘图环境实现的。如果要用3D绘图环境绘制图像，可以使用WebGL或者Three.js等库来实现。