Shulou(Shulou.com)06/01 Report--

Most people do not understand the knowledge points of this article "how to use JavaScript Canvas custom artboard", so the editor summarizes the following content, detailed content, clear steps, and has a certain reference value. I hope you can get something after reading this article. Let's take a look at this "how to use JavaScript Canvas custom artboard" article.

Official introduction: Canvas API (canvas) is a new tag in HTML5 used to generate images in real time on the web page, and can manipulate the image content, it is basically a bitmap (bitmap) that can be manipulated with JavaScript.

Code section (you can use it by copying it directly):

JavaScript+Canvas implements a custom artboard var canvas = document.getElementById ("canvas"); var ctx = canvas.getContext ("2d"); / / draw a black rectangle ctx.fillStyle= "black"; ctx.fillRect (0memo 0600300); / / press the marks var onoff = false; / / variables oldx and oldy represent the coordinates before mouse movement var oldx =-10; var oldy =-10 / / set color var linecolor = "white"; / / set lineweight var linw = 4; / / add mouse movement event canvas.addEventListener ("mousemove", draw,true); / / the third parameter is mainly related to capture or bubbling / / add mouse down event canvas.addEventListener ("mousedown", down,false) / / add mouse pop-up event canvas.addEventListener ("mouseup", up,false); function down (event) {onoff = true; oldx = event.pageX-10; oldy = event.pageY-10; / / console.log (event.pageX+'.000.'+event.pageY) / / the mouse position of event.pageX and event.pageY relative to the entire page includes the overflow part (that is, the scroll bar)} function up () {onoff = false;} function draw (event) {if (onoff = = true) {var newx = event.pageX-10; var newy = event.pageY-10; ctx.beginPath () / / beginPath () discards any currently defined path and starts a new path. It sets the current point to (0pm 0). Ctx.moveTo (oldx,oldy); / / move to the click-time coordinate, with that coordinate as the origin ctx.lineTo (newx,newy); / / draw the new path ctx.strokeStyle=linecolor; ctx.lineWidth=linw; ctx.lineCap= "round"; ctx.stroke (); / / stroke () method will actually draw the path defined by the moveTo () and lineTo () methods. The default color is black. / / assign the new mouse position to the next starting coordinate oldx = newx; oldy = newy;};}. The above is about "how to use JavaScript Canvas custom drawing board". I believe you all have some understanding. I hope the content shared by the editor will be helpful to you. If you want to learn more about the relevant knowledge, please follow the industry information channel.

Welcome to subscribe "Shulou Technology Information " to get latest news, interesting things and hot topics in the IT industry, and controls the hottest and latest Internet news, technology news and IT industry trends.