Canvas plotting of html5 1. WordPad function, html5canvas

Canvas plotting of html5 1. WordPad function, html5canvas

Wordpad example:

Wordpad analysis: 1. Click the mouse to start writing (onmosedown) 2. Press the mouse to write (onmousemove) 3. Loosen the mouse and stop writing (UNDO onmousemove event ):

Code:

<Strong> <! Doctype html> </strong> 








How do I perform various drawing operations on canvas-based plotting?
Canvas-Based Drawing does not directly perform various drawing operations on the drawing screen created by the canvas label, but relies on the Rendering Context provided by the screen ), all drawing commands and attributes are defined in the rendering context. I can describe so much about it. I learned from videos. You can also look at "HTML5 Vector Plotting new function-Basic Canvas usage" in Tudou"

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.