Home >Web Front-end >HTML Tutorial >Getting Started with Canvas (1): Draw basic graphics such as rectangles, circles, straight lines, curves, etc._html/css_WEB-ITnose
Getting Started with Canvas (1): Draw basic graphics such as rectangles, circles, straight lines, curves, etc._html/css_WEB-ITnose
- WBOYOriginal
- 2016-06-24 11:56:301110browse
Source: http://www.ido321.com/968.html
1. Basic knowledge of Canvas
Canvas is HTML 5 A new element is added specifically for drawing graphics. The canvas element is equivalent to a "canvas", a colorless and transparent area, and JavaScript needs to be used to write a script for painting in it.
Placing canvas elements on the page is very simple. Use the 5ba626b379994d53f7acf72a64f9b697 tag and specify several basic attributes: id, width and height. Next, let me get started with canvas through a few small cases~~~^_^~~~
2. Canvas small case (test results are from the latest version of Google)
1. Drawing Rectangle
canvas.html:
1: <!DOCTYPE >
2: <html>
3: <head>
4: <meta charset="utf-8">
5: <title>canvas元素学习</title>
6: <script type="text/javascript" src="canvas.js">
7: </script>
8: </head>
9: <body>
10: <h3>canvas元素学习</h3>
11: <canvas id="canvas" width="400" height="300"></canvas>
12: </body>
13: </html>
canvas.js:
1: window.onload=function()
2: { 3: // 获取canvas 的ID
4: var canvas = document.getElementById('canvas'); 5: if (canvas == null)
6: { 7: return false;
8: }
9: // 获取上下文
10: var context = canvas.getContext('2d'); 11: // 设置填充的样式
12: context.fillStyle = "#eeeeff";
13: // Draw a rectangle and fill it with fillStyle. The first two parameters of fillRect (strokeRect) are the position of the upper left corner of the rectangle, and the last two parameters are respectively Is the 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: // 设置边框的样式
17: context.strokeStyle = 'blue';
18: // 设置边框大小
19: context.lineWidth = 2;
20: context.fillRect(50,50,100,100);
21: // 绘制矩形边框
22: context.strokeRect(50,50,100,100);
23: }
Effect:
2. Draw a circle: use path to draw
1: // 获取canvas 的ID
2: var canvas = document.getElementById('canvas'); 3: if (canvas == null)
4: { 5: return false;
6: }
7: // 获取上下文
8: var context = canvas.getContext('2d'); 9: // 设置填充的样式
10: context.fillStyle = "#eeeeff";
11: // 绘制矩形,以fillStyle填充
12: context.fillRect(0,0,400,300);
13: for(var i = 0; i<9; i++)
14: { 15: // 创建路径
16: context.beginPath();
17: // 绘制圆形路径
18: context.arc(i*25, i*25, i*10, 0, Math.PI * 2, true);
19: // 关闭路径，如果不关闭，则图像会重叠
20: context.closePath();
21: context.fillStyle = 'rgba(255,0,0,0.25)';
22: // 以fillStyle填充
23: context.fill();
24: }
arc() draws an arc, its parameters are as follows
arc(x,y,radius,startAngle, endAngle, anticlockwise): x, y is the center position 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 radians), anticlockwise is a Boolean value, true means sequential Draw the image clockwise, false means draw it counterclockwise. The starting angle is 0 and the ending angle is 360 (PI*2) to draw a circle.
Effect:
3. Drawing a straight line
Drawing a straight line uses the moveTo() and lineTo() methods
1: // 获取canvas 的ID
2: var canvas = document.getElementById('canvas'); 3: if (canvas == null)
4: { 5: return false;
6: }
7: // 获取上下文
8: var context = canvas.getContext('2d'); 9: // 设置填充的样式
10: context.fillStyle = "#eeeeff";
11: // 绘制矩形,以fillStyle填充
12: context.fillRect(0,0,400,300);
13: context.beginPath();
//The starting point coordinates of the parameter line
14: context.moveTo(50,50);
//The end point coordinates of the parameter line
15: context.lineTo(100,100);
16: context.closePath();
//Draw graphics after closing the path
17: context.strokeStyle = 'red';
18: context.stroke();
Effect:
Draw a complex point
1: // 获取canvas 的ID
2: var canvas = document.getElementById('canvas'); 3: if (canvas == null)
4: { 5: return false;
6: }
7: // 获取上下文
8: var context = canvas.getContext('2d'); 9: // 设置填充的样式
10: context.fillStyle = "#eeeeff";
11: // 绘制矩形,以fillStyle填充
12: context.fillRect(0,0,400,300);
13: var dx = 150;
14: var dy = 150;
15: var s = 100;
16: // 创建路径
17: 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 the curve: Use bezierCurveTo to draw the Bezier curve
bezierCurveTo can draw curves and is the curve version of lineTo
1: // 获取canvas 的ID
2: var canvas = document.getElementById('canvas'); 3: if (canvas == null)
4: { 5: return false;
6: }
7: // 获取上下文
8: var context = canvas.getContext('2d'); 9: // 设置填充的样式
10: context.fillStyle = "#eeeeff";
11: // 绘制矩形,以fillStyle填充
12: context.fillRect(0,0,400,300);
13: var dx = 150;
14: var dy = 150;
15: var s = 100;
16: // 创建路径
17: 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: Getting Started with Canvas ( 2): Graphic gradient and image shape transformation