Canvas simple drawing board

Canvas is a way of drawing by retrieving a ‘2D’ context from JS.

Hands type

/*html*/

<canvas id="canvas"></canvas>
Copy the code

Build the Canvas palette and get the ‘2D’ context

const canvas=document.querySelector("#canvas") const ctx=canvas.getContext('2d') ctx.fillStyle='red' ,0,20,20 CTX. FillRect (0)Copy the code

Note: the coordinates used by the CTX API are all from the top left corner of the Canvas palette. If the page coordinates are retrieved from clientX/clientY, subtract the left/top value of the canvas distance from the page to use the API.

Drawing simple shapes

Ctx.fillstyle ='red' // fill color ctc.strokestyle ='black' // border color ctx.linewidth ='4' // brush lineWidth 4px ctx.fillrect (0,0,10,10) Arc (10,10,5,0, math.pi,false) ctx.stroke() // draw a clockwise arc from 0 to π at (10px,10px) position Ctx.beginpath () // new path starts ctx.moveto (10,10) // brush end point ctx.lineto (20,10) // line from (10px,10px) to (20px,10px) ctx.lineto (20,20) ClosePath () from (20px,10px) to (20px,20px) ctx.closepath () // Close the path to form a triangle ctx.stroke() // Display the stroke to the artboardCopy the code

Touch screen painting

The following is the painting method I encapsulate when I make canvas palette.

Constructor (){this.paiting=false this.isline =true this.isrect =false this.isarc =false This. start=null /* */} / other methods... / paint(container, ctx, top) { const isTouchDevice = 'ontouchstart' in document.documentElement; let { painting, start, drawLine, pushPaint, isLine, isRect, IsArc} = this let _this = this if (isTouchDevice) {let last = [] container. Ontouchstart = function (e) {let x = e.touches[0].clientX; let y = e.touches[0].clientY; start = [x, y] } container.ontouchmove = function (e) { painting = true let x = e.touches[0].clientX; let y = e.touches[0].clientY; last = [x, y] if (isLine) { drawLine(ctx, start[0], start[1], x, y, top); // start = [x, Y]}} container. Ontouchend = function (e) {if (isLine) {} if (start &&painting &&isrect) _this.drawRect(ctx, start[0], start[1], last[0], last[1], top) } if (start && painting && isArc) { let dep = Math.sqrt(Math.pow((last[0] - start[0]), 2) + Math.pow((last[1] - start[1]), 2)); _this.drawArc(ctx, start[0], start[1], dep, top) } pushPaint.call(_this, Container) painting = false start = null}} else {// Paint. Onmousedown = function (e) {start = [e.clientx, e.clientY] if (isLine) { painting = true; } if (isRect) { } if (isArc) { } } document.onmousemove = function (e) { if (isLine) { if (painting === true) { drawLine(ctx, start[0], start[1], e.clientX, e.clientY, top) start = [e.clientX, e.clientY] } } if (isRect) { } if (isArc) { } } document.onmouseup = function (e) { let x = e.clientX let y = e.clientY if (isLine) { painting = false; } if (start && isRect) { _this.drawRect(ctx, start[0], start[1], x, y, top) } if (start && isArc) { let dep = Math.sqrt(Math.pow((x - start[0]), 2) + Math.pow((y - start[1]), 2)); _this.drawArc(ctx, start[0], start[1], dep, top) } pushPaint.call(_this, container) start = null } } } }Copy the code