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

How to use code to achieve HTML5Canvas basic drawing, in view of this problem, this article introduces the corresponding analysis and solution in detail, hoping to help more partners who want to solve this problem to find a more simple and feasible method.

Basic drawing

XML/HTML Code copies content to the clipboard

Var canvas = document.getElementById ('canvas'); if (canvas.getContext) {var context = canvas.getContext (' 2d'); / / Line weight context.lineWidth = 4; / / Brush color context.strokeStyle = 'red'; / / fill color context.fillStyle = "red"; / / Line cap type context.lineCap =' butt' / / round, square / / start path context.beginPath (); / / start context.moveTo (10 Magi 10); / / end context.lineTo (150 Magazine 50); / / draw context.stroke ();}

Rectangle

XML/HTML Code copies content to the clipboard

Var canvas = document.getElementById ('canvas'); if (canvas.getContext) {context.beginPath (); context.strokeRect (10 ~ (10)); / / another way of rectangle: context.rect (10 ~ (10)); context.stroke (); / / solid rectangle context.beginPath (); context.fillRect (10 ~ (10)) / / another way of solid rectangle context.beginPath (); context.rect (10meme 10pm 70pm 40); context.fill ();}

Circle

XML/HTML Code copies content to the clipboard

Var canvas = document.getElementById ('canvas'); if (canvas.getContext) {context.beginPath () / / circle center coordinate x, circle center coordinate Y, arc radius, starting angle, ending angle, whether counterclockwise / / the fourth parameter and the fifth parameter are the radians to be passed, if you draw 30 angles, you need to convert them into radians 30 * Math.PI / 180 context.arc (100Person70th0130 * Math.PI / 180, true); context.stroke (); context.fill () }

Fillet

XML/HTML Code copies content to the clipboard

Var canvas = document.getElementById ('canvas'); if (canvas.getContext) {context.beginPath (); context.moveTo (20); context.lineTo (70); / / draw a path with Radian p1.x p1.y p2.x, p2.y Arc Radius, context.arcTo (120Power30, 12050); context.lineTo (120120); context.stroke () / / erase canvas artboard context.beginPath (); context.fillRect (10Med 10200100); / / erase area context.clearRect (30rec 30rem 50je 50);}

Quadratic Bezier curve

XML/HTML Code copies content to the clipboard

Var canvas = document.getElementById ('canvas'); if (canvas.getContext) {context.beginPath (); context.moveTo (100100); context.quadraticCurveTo (20min50 and 200jing20); context.stroke ();}

Cubic Bezier curve

XML/HTML Code copies content to the clipboard

Var canvas = document.getElementById ('canvas'); if (canvas.getContext) {context.moveTo (68130); var cX1 = 20; var cY1 = 10; var cX2 = 268; var cY2 = 10; var endX = 268; var endY = 170; context.bezierCurveTo (cX1, cY1, cX2, cY2, endX, endY); context.stroke () / / use clip to specify the drawing area. After you specify the drawing area, you can only wipe the total drawing area in the drawing area / / draw a circle context.arc (100 * Math.PI/ 180, true); / / limit the area context.clip (); / / start trying to draw other context.beginPath (); context.fillStyle = 'lightblue' / / the resulting rectangle does not show context.fillRect (0memo 0300150);}

Advanced use of artboard

XML/HTML Code copies content to the clipboard

Var canvas = document.getElementById ('canvas'); if (canvas.getContext) {var context = canvas.getContext (' 2d'); / * * drawImage (image,dx,dy) * drawImage (image,dx,dy,dw,dh) * drawImage (image,sx,sy,sw,sh,dx,dy,dw,dh) * image drawing object * coordinates of dx dy canvas * dw,dh indicates where image is about to draw in canvas * sw,sh represents the area to be drawn by image * start position for sx,sy to draw * / var image = document.getElementById ('img'); context.drawImage (image, 0,0); var img = new Image () Img.src = 'images/1.jpg'; img.onload = function () {/ / drawImage / / draw / / context.drawImage (img,0,0) from zero coordinates; / / draw the whole picture to 100100 length and width / / context.drawImage (img,0,0, 100,100) / / Screenshot, 50 context.drawImage 50 to 100100 are drawn from 260130 and put into the 100100 length and width area / / context.drawImage (img, 50 Magi 50, 100 mine100, 260,130,100pr 100); / / use getImageData and putImageData to draw pictures context.drawImage (img, 10,10) / / get pixel data from the artboard / / start position, end position var imgData = context.getImageData (50Magne50100100); / / draw the data to the specified location coordinates context.putImageData (imgData,10260) of the artboard; / / draw part of the removed pixel data to the artboard context.putImageData (imgData,200,260,50,50100100) / / createImageData create pixel var imgData = context.getImageData (50Power50200200); / / create an empty object of specified size var imgData01 = context.createImageData (imgData); for (I = 0; I < imgData01.width * imgData01.height * 4) ITunes 4) {/ / Red pixels imgData01.data [I + 0] = 255; imgData01.data [iTun1] = 0; imgData01.data [iTunes 2] = 0; imgData01.data [iTunes 3] = 255;} context.putImageData (imgData01, 10,260) }} the answer to the question about how to use code to implement HTML5Canvas basic drawing is shared here. I hope the above content can be of some help to you. If you still have a lot of doubts to be solved, you can follow the industry information channel to learn more about it.

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.