Home > Developer > Web Develop
Canvas ,introduced inHTML 5 , can do a lot of things: drawing, animation, game development and so on.
Canvas ElementsCanvas Chinese translates to: canvases.
<canvas id= "Yourcanvasid" width= "" "Height="/> "
The Canvas element has only two additional properties in addition to the common properties:width, height, They are not units, in fact, the unit is px, but can not write units. If you do not specify these two properties, the default is width ,height is .
As we all know,the style of HTML elements can be specified using CSS styles. Canvas is no exception.
<HTML> <Head> <title>Canvas-01</title> <style>Body{background:#dddddd; }#canvas{margin:20px;padding:20px;background:#ffffff;Border:Thin inset #aaaaaa;width:600px;Height:300px; } </style> </Head> <Body> <CanvasID= "Canvas">Canvas not supported</Canvas> <Scripttype= "Text/javascript"> varCanvas=document.getElementById ("Canvas"), CTX=Canvas.getcontext ("2d"); Ctx.font='38pt Arial'; Ctx.fillstyle='Cornflowerblue'; Ctx.strokestyle='Blue'; Ctx.filltext ("Hello Canvas", Canvas.width/2-150, Canvas.height/2 + the); Ctx.stroketext ("Hello Canvas Stroke", Canvas.width/2-200, Canvas.height/2 + the); </Script> </Body></HTML>
The result we expect is this:
and the actual results of the implementation:
from the execution results, it's really a magnified Hello , what is this for?
In fact, I think I can understand it this way, it is a projection cloth, because the real drawing is not on it, but on a drawing board, the drawing is finished projecting onto the projection cloth. This, similar to the slide projector we used in high school, writes the exercise on a glass plate (drawing board) and then projects it onto a projection cloth or white wall (canvas).
So, when you think about it, it's clear that when the width,height attribute value in a CSS style is width,height with the canvas element is not the same, the content on the drawing board is automatically scaled to the canvas.
There are currently three methods of the Canvas element:
Through GetContext ("2d"); to obtain canvasrenderingcontext2d object, which can then be used based on this context object to 2d figure out
Through GetContext ("3d"); you can do it . 3d Drawing, 3d the bottom of the drawing is WebGL .
In the following article, you will learn the necessary knowledge to use canvas drawing.
CANVASRENDERINGCONTEXT2D API Details:
Http://www.w3school.com.cn/jsref/dom_obj_canvasrenderingcontext2d.asp
Https://developer.mozilla.org/en-US/docs/Web/API/CanvasRenderingContext2D
HTML5 Canvas: initial 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
