下面是用JavaScript实现画图效果的代码攻略：
在开始写代码之前，需要确认一些准备工作：
<canvas>标签或者其他类型的块级元素。mousedown、mousemove、mouseup等事件。下面是一个简单的JavaScript代码片段，用于实现在画板上画出一条线段：
// 获取画板元素和绘图上下文
const canvas = document.querySelector('#canvas');
const ctx = canvas.getContext('2d');
let painting = false;
ctx.lineCap = 'round';
ctx.lineWidth = 5;
// 监听鼠标按下事件
canvas.addEventListener('mousedown', function(e) {
painting = true;
ctx.beginPath();
ctx.moveTo(e.clientX, e.clientY);
});
// 监听鼠标移动事件
canvas.addEventListener('mousemove', function(e) {
if (painting) {
ctx.lineTo(e.clientX, e.clientY);
ctx.stroke();
}
});
// 监听鼠标松开事件
canvas.addEventListener('mouseup', function() {
painting = false;
});
以上代码实现了一个简单的画线效果，当鼠标按下时，记录下开始的位置，当鼠标移动时，根据鼠标的位置不断地画出一条线段，当鼠标松开时，停止画线。
下面是一个实现画出三角形的JavaScript示例代码：
// 获取画板元素和绘图上下文
const canvas = document.querySelector('#canvas');
const ctx = canvas.getContext('2d');
// 画出三角形的函数
function drawTriangle(x, y, sideLength, color) {
ctx.beginPath();
ctx.moveTo(x, y);
ctx.lineTo(x + sideLength / 2, y + sideLength);
ctx.lineTo(x - sideLength / 2, y + sideLength);
ctx.closePath();
ctx.fillStyle = color;
ctx.fill();
}
// 在鼠标位置画出三角形
canvas.addEventListener('click', function(e) {
drawTriangle(e.clientX, e.clientY, 50, 'red');
});
以上代码实现了一个简单的画出特定形状的示例，当鼠标点击画板时，在鼠标的位置上画出一个边长为50的红色三角形。
以上就是用JavaScript实现画图效果的完整攻略，其中包括了两个示例代码（画线和画三角形）。此外，还需要注意以下几点：
ctx）来实现具体的绘图操作。ctx.lineWidth、ctx.strokeStyle、ctx.fillStyle等属性。requestAnimationFrame函数来进行绘制，而不是使用setInterval或setTimeout函数。本文链接：http://task.lmcjl.com/news/15740.html