Home > Developer > Web Develop
Canvas is a canvas, you can draw any line, graphics, fill a series of operations, and the operation of the drawing is JS, so let JS programming to the point of drug. In addition, canvas not only provides a simple two-dimensional vector drawing, but also provides three-dimensional drawing, as well as image processing and a series of API support.
Second, the canvas important context object(1) To use canvas to draw a graphic, you must add a canvas label to the page.
For example:<canvas id="demoCanvas" width="500" height="500"> <p>爷，你还在上个世纪吧，现在都html5了，您还在ie6时代？</p> </canvas>
(2) Of course only the above label, can only be created a canvas, where the width and height property is to set the size of the canvas. The id attribute is also required, followed by the ID to get the current canvas's Dom object. With this Canvase DOM object you can get his context, and the canvas drawing is based on the context object of the canvas object.
Code:<script type="text/javascript">
//第一步：获取canvas元素
var canvasDom = document.getElementById("demoCanvas");
//第二步：获取上下文
var context = canvasDom.getContext(‘2d‘);
</script>
(3) Contextual context default two drawing methods: The first: Draw the line (stroke), the second: fills: Fill.
Note: After deciding which method to use, set the style before filling or drawing the line. Third, canvas fisrt Demo: Draw a three-dimensional transparent rectangular Canvas to draw the overall steps<body> <canvas id="Democanvas"Width=" -"height=" -"> <p> ye, you still in the last century, now all HTML5, you still in the IE6 era? </p> </canvas> <!---a demo---that draws a rectangle is shown below > <script type="Text/javascript">//First step: Get the canvas element varCanvasdom = document.getElementById ("Democanvas"); //Step Two: Get context varContext = Canvasdom.getcontext ('2d'); //Step Three: Specify drawing line style, colorContext.strokestyle ="Red"; //Fourth step: Draw the rectangle, only the line. The content is emptyContext.strokerect (Ten,Ten, the, -); //The following shows the fill rectangle. Context.fillstyle ="Blue"; Context.fillrect ( the, the, -, -); </script></body>Final effect:
Four, the canvas draws the line the Beginpath method of the context object represents the start drawing path, the MoveTo (x, Y) method sets the starting point of the segment, the LineTo (x, Y) method sets the end point of the segment, and the stroke method is used to color the transparent segment. The MoveTo and LineTo methods can be used multiple times. Finally, you can use the Closepath method to automatically draw a line from the current point to the starting point to form a closed graph, eliminating the use of a LineTo method.
The canvas draws the text context the Filltext (string, x, Y) method of the context object is used to draw the text whose three parameters are the text content, the x-coordinate of the starting point, and the y-coordinate. Before using, use font to set font, size, style (similar to the Font property of CSS). Similar to this is the Stroketext method, which is used to add hollow words. Also note that the Filltext method does not support text break, that is, all text appears in one line. So, if you want to generate multiple lines of text, you only have to call multiple Filltext methods. Here is the Code demo:<body> <canvas id= "Democanvas" width= "500" height= > </canvas> <script type= "Text/javascript" >//Get the current canvas object by ID var canvasdom = document.getElementById ("Democanvas"); Gets the object of the context through the Canvas DOM object var context = Canvasdom.getcontext ("2d"); Context.beginpath (); Start path Draw Context.moveto (20, 20); Set the starting point of the path with coordinates of (20,20) Context.lineto (200, 200); Draw a straight line to (200,20) Context.lineto (400, 20); Context.closepath (); Context.linewidth = 2.0; Set the line width Context.strokestyle = "#CC0000"; Sets the color of the line Context.stroke (); The line is shaded, and the entire line becomes visible </script> </body>
<canvas id="demoCanvas" width="500" height="600"></canvas> <script type="text/javascript"> //通过id获得当前的Canvas对象 var canvasDom = document.getElementById("demoCanvas"); //通过Canvas Dom对象获取Context的对象 var context = canvasDom.getContext("2d"); context.moveTo(200,200); // 设置字体 context.font = "Bold 50px Arial"; // 设置对齐方式 context.textAlign = "left"; // 设置填充颜色 context.fillStyle = "#005600"; // 设置字体内容，以及在画布上的位置 context.fillText("老马!", 10, 50); // 绘制空心字 context.strokeText("blog.itjeek.com!", 10, 100); </script>
Vii. Canvas drawing Pictures Canvas drawing pictures should be one of his major features or highlights. Of course, with the file API, so that JS becomes unmatched. Then we'll show you how to draw a picture and make a stereoscopic effect. The following is a demo of the picture being drawn:<canvas id="demoCanvas" width="500" height="600"></canvas> <script type="text/javascript"> //通过id获得当前的Canvas对象 var canvasDom = document.getElementById("demoCanvas"); //通过Canvas Dom对象获取Context的对象 var context = canvasDom.getContext("2d"); context.beginPath();//开始绘制路径 //绘制以 （60,60）为圆心，50为半径长度，从0度到360度（PI是180度），最后一个参数代表顺时针旋转。 context.arc(60, 60, 50, 0, Math.PI * 2, true); context.lineWidth = 2.0;//线的宽度 context.strokeStyle = "#000";//线的样式 context.stroke();//绘制空心的，当然如果使用fill那就是填充了。 </script>
Eight, summed up canvas finally introduced the most basic usage. Of course, this article has borrowed a lot of examples from other websites. The author also lists some of the most basic essentials. In general, canvas drawing and text, shape is not very difficult, API code to get started is basically the beginner. But this brings a lot of possibilities, so that Html5 really strong to the point of incomparable. Of course, this article does not involve the CANVAS3D drawing of the relevant content, but also about the canvas to draw gradients, draw shadows, pictures of related processing operations, and so on, if the reader really need to search for the relevant information or directly read the HTML5 of the latest standard documents.<canvas id="demoCanvas" width="500" height="600"></canvas> <script type="text/javascript"> //通过id获得当前的Canvas对象 var canvasDom = document.getElementById("demoCanvas"); //通过Canvas Dom对象获取Context的对象 var context = canvasDom.getContext("2d"); var image = new Image();//创建一张图片 image.src = "Images/a.png";//设置图片的路径 image.onload = function() {//当图片加载完成后 for (var i = 0; i < 10; i++) {//输出10张照片 //参数：（1）绘制的图片 （2）坐标x，（3）坐标y context.drawImage(image, 100 + i * 80, 100 + i * 80); } }; </script>
JS Canvas components (<canvas></canvas>)
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
