I am a Javascript noob.
(我是Java语言的菜鸟。)
I am working a school project for which I am trying to create an MS paint like program.(我正在尝试一个学校项目，为此我试图创建一个MS Paint like like程序。)
The line is drawn to the user's mouse position but the stroke width and colour are randomized.(该线被绘制到用户的鼠标位置，但是笔划宽度和颜色是随机的。)
So, the effect I am trying to achieve is that when the user moves their mouse, a line of random size and colour (one of the ones in the array) is drawn, creating a rainbow effect as the line is drawn.
(因此，我试图实现的效果是，当用户移动鼠标时，会绘制一条随机大小和颜色的线（数组中的一个），并在绘制该线时产生彩虹效果。)
The issue I'm having is that with every move of the mouse, the entire already-drawn stroke on the canvas changes width and colour.
(我遇到的问题是，随着鼠标的任何移动，画布上整个已绘制的笔触都会改变宽度和颜色。)
How can I make it so only the newly drawn part of the stroke changes?
(如何使笔划的新绘制部分发生变化？)
var canvas; var ctx; var w = 1420; var h = 900; var colour = ["lime", "orange", "purple", "red", "gold","green", "blue"]; var size function randi(range){ var r = Math.floor(Math.random()*range); return r } // Initialization sequence. function setUpCanvas () { // Find the canvas element. canvas = document.querySelector("#myCanvas"); ctx = canvas.getContext("2d"); canvas.width = w; canvas.height = h; canvas.style.border = "10px solid red"; canvas.addEventListener("mousemove", ev_mousemove, false); } function init () { // Attach the mousemove event handler canvas.addEventListener('mousemove', ev_mousemove, false); } // The mousemove event handler var started = false; function ev_mousemove (ev) { var x; var y; // Get the mouse position relative to the <canvas> element if (ev.layerX || ev.layerX == 0) { // Firefox x = ev.layerX; y = ev.layerY; } else if (ev.offsetX || ev.offsetX == 0) { // Opera x = ev.offsetX; y = ev.offsetY; } // The event handler works like a drawing pencil which // tracks the mouse movements. We start drawing a path made up of lines if (!started) { ctx.beginPath(); ctx.moveTo(x, y); started = true; } else { drawLine(colour[randi(5)], randi(100)); function drawLine (colour,size){ ctx.lineTo(x, y); ctx.lineWidth = size; ctx.strokeStyle = colour; ctx.stroke(); } } } setUpCanvas();
<!DOCTYPE html> <head> <title>Project 5</title> </style> <link rel="stylesheet" type="text/css" href="project5.css"> </head> <body> <p></p> <canvas id="myCanvas"></canvas> <script type="text/javascript" src="project5.js"></script> </body> </html>
ask by jsnoob1298 translate from so
与恶龙缠斗过久,自身亦成为恶龙；凝视深渊过久,深渊将回以凝视…
