跳转到帖子
在手机APP中查看

一个更好的浏览方法。了解更多。
OKCCN - XenForo & IPS Plugin Marketplace

主屏幕上的全屏APP，带有推送通知、徽章等。

在iOS和iPadOS上安装此APP
  1. 在Safari中轻敲分享图标
  2. 滚动菜单并轻敲添加到主屏幕。
  3. 轻敲右上角的添加按钮。
在安卓上安装此APP
  1. 轻敲浏览器右上角的三个点菜单 (⋮) 。
  2. 轻敲添加到主屏幕或安装APP。
  3. 轻敲安装进行确认。
  • 选择语言

HTML Canvas Reference

Cavalry
在 教程

推荐的帖子

  • 行政经理

HTML Canvas Reference

The <canvas> element defines a bitmapped area in an HTML page.

The Canvas API allows JavaScript to draw graphics on the canvas.

The Canvas API can draw shapes, lines, curves, boxes, text, and images, with colors, rotations, transparencies, and other pixel manipulations.

You can add a canvas element anywhere in an HTML page with the <canvas> tag:

Example

<canvas id="myCanvas" width="300" height="150"></canvas>

You can access a <canvas> element with the HTML DOM method getElementById().

To draw in the canvas you need to create a 2D context object:

const myCanvas = document.getElementById("myCanvas");
const ctx = myCanvas.getContext("2d");

Note

The HTML <canvas> element itself has no drawing abilities.

You must use JavaScript to draw any graphics.

The getContext() method returns an object with tools (methods) for drawing.

Drawing on the Canvas

After you have created a 2D context, you can draw on the canvas.

The fillRect() method draws a black rectangle with a top-left corner at position 20,20. The rectangle is 150 pixel wide and 100 pixels high.

Example

const myCanvas = document.getElementById("myCanvas");
const ctx = myCanvas.getContext("2d");

ctx.fillRect(20, 20, 150, 100);

Using Colors

The fillStyle property sets the fill color of the drawing object:

Example

const myCanvas = document.getElementById("myCanvas");
const ctx = myCanvas.getContext("2d");

ctx.fillStyle = "red";
ctx.fillRect(20, 20, 150, 100);

You can also create a new <canvas> element with the document.createElement() method, and add the element to an existing HTML page:

Example

const myCanvas = document.createElement("canvas");
document.body.appendChild(myCanvas);
const ctx = myCanvas.getContext("2d");

ctx.fillStyle = "red";
ctx.fillRect(20, 20, 150, 100);

Paths

The common way to draw on the canvas is to:

  1. Begin a Path - beginPath()
  2. Move to a Point - moveTo()
  3. Draw in the Path - lineTo()
  4. Draw the Path - stroke()

Example

const canvas = document.getElementById("myCanvas");
const ctx = canvas.getContext("2d");

ctx.beginPath();
ctx.moveTo(20, 20);
ctx.lineTo(20, 100);
ctx.lineTo(70, 100);
ctx.stroke();

Complete Canvas API Reference

This reference covers all Properties and Methods of the getContext("2d") Object, used to draw text, lines, boxes, circles, pictures, and more on the canvas.

Drawing Methods

There are only 3 methods to draw directly on the canvas:

Method Description
fillRect() Draws a "filled" rectangle
strokeRect() Draws a rectangle (with no fill)
clearRect() Clears specified pixels within a rectangle

Path Methods

Method Description
beginPath() Begins a new path or resets the current path
closePath() Adds a line to the path from the current point to the start
isPointInPath() Returns true if the specified point is in the current path
moveTo() Moves the path to a point in the canvas (without drawing)
lineTo() Adds a line to the the path
fill() Fills the current path
rect() Adds a rectangle to the path
stroke() Draws the current path
 Circles and Curves
bezierCurveTo() Adds a cubic Bézier curve to the path
arc() Adds an arc/curve (circle, or parts of a circle) to the path
arcTo() Adds an arc/curve between two tangents to the path
quadraticCurveTo() Adds a quadratic Bézier curve to the path

Text

Method/Prop Description
direction Sets or returns the direction used to draw text
fillText() Draws "filled" text on the canvas
font Sets or returns the font properties for text content
measureText() Returns an object that contains the width of the specified text
strokeText() Draws text on the canvas
textAlign Sets or returns the alignment for text content
textBaseline Sets or returns the text baseline used when drawing text

Colors, Styles, and Shadows

Method/Property Description
addColorStop() Specifies the colors and stop positions in a gradient object
createLinearGradient() Creates a linear gradient (to use on canvas content)
createPattern() Repeats a specified element in the specified direction
createRadialGradient() Creates a radial/circular gradient (to use on canvas content)
fillStyle Sets or returns the color, gradient, or pattern used to fill the drawing
lineCap Sets or returns the style of the end caps for a line
lineJoin Sets or returns the type of corner created, when two lines meet
lineWidth Sets or returns the current line width
miterLimit Sets or returns the maximum miter length
shadowBlur Sets or returns the blur level for shadows
shadowColor Sets or returns the color to use for shadows
shadowOffsetX Sets or returns the horizontal distance of the shadow from the shape
shadowOffsetY Sets or returns the vertical distance of the shadow from the shape
strokeStyle Sets or returns the color, gradient, or pattern used for strokes

Transformations

Method Description
scale() Scales the current drawing bigger or smaller
rotate() Rotates the current drawing
translate() Remaps the (0,0) position on the canvas
transform() Replaces the current transformation matrix for the drawing
setTransform() Resets the current transform to the identity matrix. Then runs transform()

Image Drawing

Method Description
drawImage() Draws an image, canvas, or video onto the canvas

The ImageData Object / Pixel Manipulation

Method/Property Description
createImageData() Creates a new, blank ImageData object
getImageData() Returns an ImageData object that copies the pixel data for the specified rectangle on a canvas
ImageData.data Returns an object that contains image data of a specified ImageData object
ImageData.height Returns the height of an ImageData object
ImageData.width Returns the width of an ImageData object
putImageData() Puts the image data (from a specified ImageData object) back onto the canvas

Compositing

Property Description
globalAlpha Sets or returns the current alpha or transparency value of the drawing
globalCompositeOperation Sets or returns how a new image are drawn onto an existing image

Other Methods

Method Description
clip() Clips a region of any shape and size from the original canvas
save() Saves the state of the current drawing context and all its attributes
restore() Restores the previously saved state and attributes
createEvent()  
getContext()  
toDataURL()  

Standard Properties and Events

The canvas object also supports the standard properties and events.

Related Pages

Canvas tutorial: Canvas Tutorial

HTML tutorial: HTML5 Canvas

HTML reference: HTML <canvas> tag

Browser Support

The <canvas> element is an HTML5 standard (2014).

Canvas API is supported in all modern browsers:

Chrome Edge Firefox Safari Opera IE
Yes Yes Yes Yes Yes 9-11
  • 引用

    • 参与讨论

    你可立刻发布并稍后注册。 如果你有帐户，立刻登录发布帖子。

    游客
    回帖…
    转到主题列表

    帐户

    导航

    搜索

    搜索

    配置浏览器推送通知
    Chrome (安卓)
    1. 轻敲地址栏旁的锁形图标。
    2. 轻敲权限 → 通知。
    3. 调整你的偏好。
    Chrome (台式电脑)
    1. 点击地址栏中的挂锁图标。
    2. 选择网站设置。
    3. 找到通知选项并调整你的偏好。