My project 2 uses Canvas to write some images.

My project 2 uses Canvas to write some images.

In the project, you need to use Canvas to draw some images and share them with you.

Since these images need to be used frequently, they are encapsulated into one method. Here we will share with you these methods!

Some variables used (some variables may not be written, so let's make up for them): <pre name = "code" class = "html"> lineWidth = "1 ";

<pre name="code" class="html">color="blue";

strokeStyle="red";

fillStyle="blue";

// Draw the horizontal line function drawhengxian (startPoint, l, color) {context. beginPath (); context. moveTo (startPoint. x, startPoint. y); context. lineTo (startPoint. x + l, startPoint. y); context. lineWidth = lineWidth; context. strokeStyle = color; context. stroke ();}

// Draw the line function drawZheXian (points) {// draw the discounted context. beginPath (); context. moveTo (points [0]. x, points [0]. y); for (var I = 1; I <points. length; I ++) {context. lineTo (points [I]. x, points [I]. y);} context. lineWidth = lineWidth; context. strokeStyle = strokeStyle; context. stroke () ;}// draw the vertical bar function drawshuxian (starPoint, l) {context. beginPath (); context. moveTo (starPoint. x, starPoint. y); context. lineTo (starPoint. x, starPoint. y-l); context. lineWidth = lineWidth; context. strokeStyle = strokeStyle; context. stroke () ;}// draw the hollow circle function drawEmptyArc (center, radius) {context. beginPath (); context. arc (center. x, center. y, radius, 0, 2 * Math. PI, false); context. fillStyle = fillStyle; context. fill (); context. lineWidth = lineWidth; context. strokeStyle = strokeStyle; context. stroke () ;}// draw a solid triangle (that is, a colored triangle) function drawshendanshu (points, colors) {// draw a discounted context. beginPath (); context. moveTo (points [0]. x, points [0]. y); for (var I = 1; I <points. length; I ++) {context. lineTo (points [I]. x, points [I]. y);} // end the painting context. closePath (); // plot the context. fillStyle = colors; // fill path context. fill ();} // draw the snowflake Pattern function drawCha (center, l) {context. beginPath (); context. moveTo (center. x-l, center. y-l); context. lineTo (center. x + l, center. y + l); context. moveTo (center. x-l * 1.414, center. y); context. lineTo (center. x + l * 1.414, center. y); context. moveTo (center. x-l, center. y + l); context. lineTo (center. x + l, center. y-l); context. lineWidth = lineWidth; context. strokeStyle = strokeStyle; context. stroke () ;}// draw power (that is, three vertical bars of different lengths) function drawsanshuxian (center, l, isAnode) {context. beginPath (); if (isAnode) {context. moveTo (center. x-l, center. y-l * 3); context. lineTo (center. x-l, center. y + l * 3); context. moveTo (center. x, center. y-l * 2); context. lineTo (center. x, center. y + l * 2); context. moveTo (center. x + l, center. y + l); context. lineTo (center. x + l, center. y-l);} else {context. moveTo (center. x-l, center. y + l); context. lineTo (center. x-l, center. y-l); context. moveTo (center. x, center. y-l * 2); context. lineTo (center. x, center. y + l * 2); context. moveTo (center. x + l, center. y-l * 3); context. lineTo (center. x + l, center. y + l * 3);} context. lineWidth = lineWidth; context. strokeStyle = strokeStyle; context. stroke () ;}// draw two semi-circular functions drawBanYuan2 (center, l, isUp) {var radius = l/4.0; var I; for (I = 0; I <2; I ++) {context. beginPath (); if (I = 0) {context. arc (center. x + radius, center. y, radius, 0, Math. PI, isUp);} else {context. arc (center. x + 3 * radius, center. y, radius, 0, Math. PI, isUp);} context. lineWidth = lineWidth; context. strokeStyle = strokeStyle; context. stroke () ;}// resistance line (composed of many small and semi-circles, you can try) function drawXianQuan (startPoint, l ){

Var r = l/5; var potions1 = []; for (var I = 0; I <5; I ++) {var px = startPoint. x + I * r; var py = startPoint. y; potions1.push ({x: px, y: py});} var potions2 = []; for (var I = 0; I <5; I ++) {var px = startPoint. x + I * r; var py = startPoint. y + l/3; potions2.push ({x: px, y: py});} context. beginPath (); context. moveTo (startPoint. x, startPoint. y + l/6); context. lineTo (startPoint. x + l, startPoint. y + l/6); context. lineWidth = lineWidth; context. strokeStyle = strokeStyle; context. stroke (); var radius = l/10; for (var I = 0; I <potions1.length; I ++) {context. beginPath (); var isTop; if (I % 2 = 0) {isTop = true;} else {isTop = false;} context. arc (potions1 [I]. x + radius, potions1 [I]. y, radius, 0, Math. PI, isTop); context. lineWidth = lineWidth; context. strokeStyle = strokeStyle; context. stroke () ;}for (var I = 0; I <potions2.length; I ++) {context. beginPath (); var isTop; if (I % 2 = 0) {isTop = true;} else {isTop = false;} context. arc (potions2 [I]. x + radius, potions2 [I]. y, radius, 0, Math. PI, isTop); context. lineWidth = lineWidth; context. strokeStyle = strokeStyle; context. stroke () ;}}// draw the solid circle function drawFillArc (center, radius) {context. beginPath (); context. arc (center. x, center. y, radius, 0, 2 * Math. PI, false); context. fillStyle = "black"; context. fill ();} // draw the rectangular function drawFillRect (x, y, a, B) {var c = document. getElementById ("myCanvas"); var cxt = c. getContext ("2d"); cxt. strokeRect (x, y, a, B );}

Html5 two canvas overlapping put in a div, each canvas fill in an image, how to write the code?

Specify the postion: absolution of the two canvas, and set the left and top attributes of the two canvas. It is recommended that you put a small canvas on it, the method is to set the z-index of the two canvas to different values, and the value is greater than above.
For the drawing process, refer to the code below:
Var mycanvas = document. getElementByIdx_x_x_x ("mycanvas ");
Var context = mycanvas. getContext ("2d ");
Var imageObj = new Image ();
ImageObj. onload = function (){

// Draw cropped image
Var sourcex= 350;
Var sourceY = 50;
Var sourceWidth = 350;
Var sourceHeight = 350;
Var destWidth = sourceWidth;
Var destHeight = sourceHeight;
Var destX = mycanvas. width/2-destWidth/2;
Var destY = mycanvas. height/2-destHeight/2;
Context. drawImage (imageObj, sourceX, sourceY, sourceWidth, sourceHeight, destX, destY, destWidth, destHeight );
 
Hello, I want to teach you an html5 canvas problem: I drew multiple images in the canvas, including images and straight lines.

Canvas can be implemented
First, canvas must respond to mouse events (such as onmousedown)
Then, all images must create corresponding objects to record their locations and sizes, and zOrder (stacked positions, which determine who is on top when two objects overlap ), put the corresponding objects in an array and sort by zOrder
After the canvas mouse click event is triggered, the zOrder sequence is used to check that the mouse coordinates are not in the Area of an object. If the mouse coordinates are in the Area of an object, the corresponding function is executed.