The best HTML DOM Canvas Object Tutorial In 2024, In this tutorial you can learn
Canvas object,Color, style, and shadows,Line Style,rectangle,path,Change,text,Image rendering,Pixel operations,synthesis,other,Standard properties and events,related articles,
HTML DOM Canvas Object
Canvas object
Canvas object is new in HTML5.
HTML5 <canvas> tag is used to draw an image (a script is usually JavaScript).
Canvas Object Access
You can use getElementById () to access the <canvas> element:
var x = document.getElementById("myCanvas");
尝试一下
Create a Canvas object
You can use the document.createElement () method to create a <canvas> element:
var x = document.createElement("CANVAS");
尝试一下
Note: <canvas> element itself does not have the ability to draw (it is just a graphical container) - You must use a script to do the actual drawing task.
getContext () method returns an object that provides methods and properties for drawing on the canvas.
This manual provides a complete getContext properties and methods ( "2d") object that can be used to draw text, lines, rectangles, circles, etc. on the canvas.
Color, style, and shadows
Line Style
rectangle
path
Change
text
Image rendering
Pixel operations
属性 |
描述 |
width |
返回 ImageData 对象的宽度。 |
height |
返回 ImageData 对象的高度。 |
data |
返回一个对象,其包含指定的 ImageData 对象的图像数据。 |
synthesis
other
方法 |
描述 |
save() |
保存当前环境的状态。 |
restore() |
返回之前保存过的路径状态和属性。 |
createEvent() |
|
getContext() |
|
toDataURL() |
|
Standard properties and events
Canvas object also supports the standard attributes and events .
related articles
HTML Tutorial: HTML <Canvas> element