HTML5 canvas Description
The HTML5 <Canvas> tag is used to draw graphics by dynamic script (typically JavaScript). However, <Canvas> element does not have its own graphics (it's just a graphical container), you must use a script to actually draw the graphics. the getContext () method returns an object, which provides methods and properties for drawing on the canvas. This reference describes the properties and methods getContext ( "2d") object that can be used to draw text, lines, boxes, circles, etc. on the canvas.
Browser support
The following table is the mainstream browser <canvas> element of support cases:
Color Style and shadows
The following table is the canvas style and color shading-related attributes :
| Attributes | description |
|---|---|
| fillStyle | Provided for filling or returns the drawing color, gradient, or pattern |
| strokeStyle | Or returns the color set for the stroke, gradient, or pattern |
| shadowColor | Provided for color shading or returns |
| shadowBlur | Sets or returns the shadow blur level |
| shadowOffsetX | The shape of the shadow set or returns a horizontal distance |
| shadowOffsetY | Back to the shape of the shadow set, or the vertical distance |
The following table is the canvas style and color shading related methods :
| method | description |
|---|---|
| createLinearGradient() | Creating a linear gradient (for the contents of the canvas) |
| createPattern() | Repeating the specified direction specified element |
| createRadialGradient() | Create a radial / circular gradient (for the contents of the canvas) |
| addColorStop() | Specifying the gradation object, the color and stop position |
Line style
The following table is a line of related attributes :
| Attributes | description |
|---|---|
| lineCap | Sets or returns the end of a row of capital letters style |
| lineJoin | Angle setting or return type is created, when two lines of intersection |
| lineWidth | Sets or returns the current line width |
| miterLimit | Sets or returns the maximum length of the miter |
rectangle
The following table is a rectangular related methods :
| method | description |
|---|---|
| rect() | Create a rectangle |
| fillRect() | Draw a "fill" rectangle |
| strokeRect() | Drawing a rectangle (no fill) |
| clearRect() | Clears the specified pixel within a given rectangle |
Canvas path
The table is related to the path of the canvas method :
| method | description |
|---|---|
| fill() | Filling current drawing (path) |
| stroke() | Draw the path you defined |
| beginning path () | Begins a path, or reset the current path |
| moveTo() | The path to the specified point in the canvas, without creating a line |
| closePath() | Create a path from the current point to the starting point |
| lineTo() | Canvas from the last point specified to add a new point and create a line on the point |
| clip() | Clip any area shape and size from the original canvas |
| quadraticCurveTo () | Create a quadratic Bezier curve |
| bezierCurveTo() | Create a cubic Bezier curve |
| arc() | Creates an arc / curve (used to create part of a circle or a circle) |
| arcTo() | Create an arc / curve between two tangents |
| isPointInPath() | If the specified point in the current path, it returns true, false otherwise |
Canvas conversion
The table is related to the conversion method :
| method | description |
|---|---|
| scale() | Scaling graphics, large or small current drawn |
| rotate() | Rotate the current drawing |
| translate() | On the canvas from the (0,0) position redraw |
| transform() | Alternatively drawing current transformation matrix |
| set trans form () | The reset current transform matrix. Then run transform () |
Canvas text
The following table is the canvas text-related properties :
| Attributes | description |
|---|---|
| font | Sets or returns the text content of the current font attributes |
| textAlign | Sets or returns the current text alignment |
| text baseline | Use when rendering text or returns the current text baselines |
下表是画布文本相关的方法 ：
| 方法 | 描述 |
|---|---|
| fillText() | 在画布上绘制“填充”文本 |
| strokeText() | 在画布上绘制文本(无填充) |
| measureText() | 返回一个包含指定文本宽度的对象 |
图像绘制
下表是画布图像绘制相关的方法 ：
| 方法 | 描述 |
|---|---|
| drawImage() | 在画布上绘制图像、画布或视频 |
像素操作
下表是画布像素操作相关的属性 ：
| 属性 | 描述 |
|---|---|
| width | 返回ImageData对象的宽度 |
| height | 返回ImageData对象的高度 |
| data | 返回包含指定ImageData对象的图像数据的对象 |
下表是画布像素操作相关的方法 ：
| 属性 | 方法 |
|---|---|
| createImageData() | 创建一个新的空白ImageData对象 |
| getImageData() | 返回一个ImageData对象，该对象复制画布上指定矩形的像素数据 |
| putImageData() | 将图像数据(来自指定的ImageData对象)放回画布 |
画布合成
下表是画布合成相关的属性 ：
| 属性 | 描述 |
|---|---|
| globalAlpha | 设置或返回绘图的当前alpha或透明度值 |
| globalCompositeOperation | 设置或返回如何将新映像绘制到现有映像上 |
其他
下表是画布其他一些方法 ：
| 方法 | 描述 |
|---|---|
| save() | 保存当前上下文的状 |
| restore() | 返回先前保存的路径状态和属 |
| createEvent() | 创建一个事件 |
| getContext() | 获取画布上的内容 |
| toDataURL() |