Home > Developer > JavaScript
Canvas entry (1): draws basic images such as rectangles, circles, straight lines, and curves. canvas rectangles
Source: http://www.ido321.com/968.html
I. Basic Canvas knowledge
Canvas is a new element in HTML 5 and is used to draw images. The canvas element is equivalent to a "canvas", a colorless transparent area. You need to use JavaScript to write a painting script in it.
It is easy to place the canvas element on the page. You can use the <canvas> label to specify several basic attributes: id, width, and height. Next, let's use a few small cases to get started with canvas ~~~ ^_^ ~~~
Ii. Canvas case study (the test result is from the latest Google Version)
1. Draw a rectangle
Canvas.html:
1: <!DOCTYPE >
2:3:4: <meta charset="utf-8">5: <title> canvas Element learning </title>6: <script type="text/javascript" src="canvas.js">7: </script>8:9: <body>10:11: <canvas id="canvas" width="400" height="300"></canvas>12: </body>13:Canvas. js:
1: window.onload=function()2: {3: // obtain the canvas ID4: var canvas = document.getElementById('canvas');5: if (canvas == null)6: {7: return false;8: }9: // obtain the context10: var context = canvas.getContext('2d');11: // set the filling style12: context.fillStyle = "#eeeeff";13: // draw a rectangle and fill it with fillStyle. The first two parameters of fillRect (strokeRect) are the upper left corner of the rectangle, and the last two parameters are width and height.
// The default origin is the upper left corner of the canvas.
14: context.fillRect(0,0,400,300);15: context.fillStyle = 'red';16: // set the border Style17: context.strokeStyle = 'blue';18: // set the border size19: context.lineWidth = 2;20: context.fillRect(50,50,100,100);21: // draw a rectangular border22: context.strokeRect(50,50,100,100);23: }Effect:
2. Draw a circle: Draw a circle using a path
1: // obtain the canvas ID2: var canvas = document.getElementById('canvas');3: if (canvas == null)4: {5: return false;6: }7: // obtain the context8: var context = canvas.getContext('2d');9: // set the filling style10: context.fillStyle = "#eeeeff";11: // draw a rectangle and fill it with fillStyle12: context.fillRect(0,0,400,300);13: for(var i = 0; i<9; i++)14: {15: // create a path16: context.beginPath();17: // draw a circular path18: context.arc(i*25, i*25, i*10, 0, Math.PI * 2, true);19: // close the path. If the path is not closed, the image overlaps.20: context.closePath();21: context.fillStyle = 'rgba(255,0,0,0.25)';22: // fill in with fillStyle23: context.fill();24: }Arc () draws an arc. Its parameters are as follows:
Arc (x, y, radius, startAngle, endAngle, anticlockwise): x, y is the center of the arc, radius is the radius, startAngle and endAngle are the starting and ending angles, the Unit is radians (degrees must be converted to arcs), anticlockwise is a Boolean value, true indicates clockwise drawing of the image, and false indicates clockwise drawing. The starting angle is 0, and the ending angle is 360 (PI * 2.
Effect:
3. draw a straight line
The moveTo () and lineTo () methods are used to draw a straight line.
1: // obtain the canvas ID2: var canvas = document.getElementById('canvas');3: if (canvas == null)4: {5: return false;6: }7: // obtain the context8: var context = canvas.getContext('2d');9: // set the filling style10: context.fillStyle = "#eeeeff";11: // draw a rectangle and fill it with fillStyle12: context.fillRect(0,0,400,300);13: context. beginPath ();
// Start coordinate of the Parameter Line
14: context. moveTo (50, 50 );
// The end coordinate of the Parameter Line
15: context.lineTo(100,100);16: context. closePath ();
// Draw the image after closing the path
17: context.strokeStyle = 'red';18: context.stroke();Effect:
Draw a complex Vertex
1: // obtain the canvas ID2: var canvas = document.getElementById('canvas');3: if (canvas == null)4: {5: return false;6: }7: // obtain the context8: var context = canvas.getContext('2d');9: // set the filling style10: context.fillStyle = "#eeeeff";11: // draw a rectangle and fill it with fillStyle12: context.fillRect(0,0,400,300);13: var dx = 150;14: var dy = 150;15: var s = 100;16: // create a path17: context.beginPath();18: context.fillStyle = 'rgb(100,255,100)';19: context.strokeStyle = 'rgb(0,0100)';20: var x = Math.sin(0);21: var y = Math.cos(0);22: var dig = Math.PI/15 *11;23: for (var i = 0; i < 30; i++) {24: var x = Math.sin(i * dig);25: var y = Math.cos(i * dig);26: context.lineTo(dx+x*s,dx+y*s);27: }28: context.closePath();29: context.fill();30: context.stroke();Effect:
4. Draw a curve: Use bezierCurveTo to draw a bezié Curve
BezierCurveTo is a curve version of lineTo.
1: // obtain the canvas ID2: var canvas = document.getElementById('canvas');3: if (canvas == null)4: {5: return false;6: }7: // obtain the context8: var context = canvas.getContext('2d');9: // set the filling style10: context.fillStyle = "#eeeeff";11: // draw a rectangle and fill it with fillStyle12: context.fillRect(0,0,400,300);13: var dx = 150;14: var dy = 150;15: var s = 100;16: // create a path17: context.beginPath();18: context.fillStyle = 'rgb(100,255,100)';19: context.strokeStyle = 'rgb(0,0100)';20: var x = Math.sin(0);21: var y = Math.cos(0);22: var dig = Math.PI/15 *11;23: context.moveTo(dx,dy);24: for (var i = 0; i < 30; i++) {25: var x = Math.sin(i * dig);26: var y = Math.cos(i * dig);27: context.bezierCurveTo(dx+x*s,dy+y*s-100,dx+x*s+100,dy+y*s,dx+x*s,dy+y*s);28: }29: context.closePath();30: context.fill();31: context.stroke();Effect
Next article: Canvas (2): graphic gradient and image transformation
In coreldraw, how can we create an irregular image around the image, such as a rectangle? How can we change the above line to a wave curve?1. Draw a rectangle-transpose-F10 select a node-convert a straight line to a curve-pull the node to the desired position, pull the arrow on both sides of the node to indicate, adjust the radian. Repeated action ..
2. Import the Target Image
3. effect-precise cropping of image frames-placed in the container
4. Adjust the target image to your satisfaction and complete the drawing!
(Note: My lower half is a rectangle, not a besell curve)
What is the area of a plane image enclosed by curve xy = 1, line y = x, and y = 3?Draw an image with the area enclosed in the First quadrant. Intersection (1/3, 3)
Area s = 1/3 to 1 points (3-1/x) + 1 to 3 points (3-x) = 2-ln3 + 32/9 = 50/9-ln3
Start building with 50+ products and up to 12 months usage for Elastic Compute Service
1 on 1 presale consultation
24/7 Technical Support 6 Free Tickets per Quarter Faster Response
Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.
A comprehensive suite of global cloud computing services to power your business
Payment Methods We Support
