html5画布图形怎么绝对定位怎么设置

步骤 1: 在 HTML 中设置画布，创建一个引用，并获取上下文对象

画布在 HTML 中通过 <canvas>标签定义。与其他标签类似，<canvas>的属性（如宽度和高度）作为特性输入。假设你希望创建一个宽 500 像素、高 500 像素的画布，并将其命名为“can1”，稍后在 JavaScript 中引用它时将用到。

在 HTML 文档中输入 <canvas>标签。

1

<canvas id="can1" width="500" height="500"></canvas>

在 JavaScript 文档中，创建一个变量，在编写脚本时该变量将代替“can1”。这里，我们将该变量命名为“myCanvas”，并使用 getElementById 将其链接到“can1”。

1

var myCanvas = document.getElementById("can1")

画布的 CanvasRenderingContext2D 对象具有 *** 作画布的所有命令。 这里，在上下文对象中检索“can1”。将此变量称为“myContext”。

1

var myContext = myCanvas.getContext("2d")

步骤 2: 绘制矩形、直线、贝塞尔曲线、圆和形状

在画布上绘制简单的线条非常容易。使用 JavaScript 的 moveTo 方法可设置线条开始位置的坐标。然后只需使用另一方法设置终点。 第二步可以使用若干方法，每种方法专用于帮助呈现一种不同的线型，无论是直线、贝塞尔曲线还是圆弧。若要将线条合并为形状，可以闭合对 beginPath 和 closePath 方法调用中的线条。在指定所需的外观之后，可以使用 fill 方法应用颜色，并使用 stroke 方法执行线条和形状的呈现。

应用一些基本风格。这里，通过使用 fillStyle 属性绘制一个黑色矩形，将画布背景设置为黑色 (#000)。然后使用 strokeStyle 属性将线条颜色设置为白色 (#fff)，使用 fillRect 方法应用黑色背景，并使用 lineWidth 属性将线条的粗细设置为 3 个像素。

// Specify a black background, and white lines that are 3 pixels thick.

myContext.fillStyle = '#000'

myContext.strokeStyle = '#fff'

myContext.fillRect(0,0,500,500)

myContext.lineWidth = 3myContext.fill()

在后续步骤中，将在这个 500×500 的黑色画布上继续构建。

现在，准备在画布的黑色表面绘制一个白色线条。先从直线开始。

使用 moveTo 方法设置直线的起点，使用 lineTo 方法设置终点。

这些方法采用两个数字作为参数。第一个数字表示 x 轴坐标，或者表示此坐标定义的自画布左侧算起的像素数。第二个数字是从顶部开始测量的 y 轴坐标。

// Draw a line that starts at the upper left corner of the canvas and ends at the lower right.

myContext.moveTo(0,0)

myContext.lineTo(500,500)

myContext.stroke()

若要绘制二次贝塞尔曲线，请使用 quadraticCurveTo 方法，该方法采用两个坐标—曲线的一个控制点和一个端点。

// Draw a swooping curve that spans the width of the canvas.

myContext.moveTo(0,0)

myContext.quadraticCurveTo(0,500,500,250)

myContext.stroke()

若要绘制三次贝塞尔曲线，请使用 bezierCurveTo 方法，该方法采用三个坐标—曲线的两个控制点和一个端点。

// Draw a V-shaped Bezier curve that spans the entire canvas.

myContext.moveTo(0,0)

myContext.bezierCurveTo(500, 820, 0, 500, 500, 0)

myContext.stroke()

若要创建一个圆，请使用 arc 方法：在设置用于绘制圆形轮廓的原点时，请确保将 moveTo 方法设置在沿线条路径的位置上，否则圆上将有一条通向 moveTo坐标的“尾巴”。

// Draw a circle that spans the width of the canvas.

myContext.moveTo(500,250)

myContext.arc(250,250,250,0,Math.PI*2,true)

myContext.stroke()

通过闭合对 beginPath 和 closePath 调用中的多个线条，可以从上述线条的任意组合中绘制一个 2D 形状。然后，整个形状可以使用 fill 接收一种颜色。前面设置的笔划样式将创建白色线条，在与应用于主体的红色 (#f00) 合并时，该形状将继承双色调外观。

// Draw a red diamond that spans the entire canvas.

myContext.fillStyle = '#f00'

myContext.beginPath()

myContext.moveTo(250,0)

myContext.lineTo(0,250)

myContext.lineTo(250,500)

myContext.lineTo(500,250)

myContext.closePath()

myContext.fill()

步骤 3: 显示位图图像

位图图像（如 .jpg、.png 和 .gif 文件）可以放置在画布上，甚至可以在代码中缩放和裁剪，不会触及原始文件。若要添加位图图像，请指定该图像的 URI，然后使用 drawImage 方法在画布上指定其位置。使用可选参数可将图像缩放到指定的大小，甚至仅显示图像的一个片段，这对于实现滚动背景或使用子画面表动态显示子画面等 *** 作非常有用。

若要在屏幕上绘制位图图像而不进行任何修改，请指定要用于左上角的 x 坐标和 y 坐标。

CSS left 属性用来指定被定位元素左侧边缘的位置。该属性定义了被定位元素左侧外边距边界与其包含块元素左侧边界之间的偏移。

left是一个偏移属性，偏移属性用于指定一个被定位元素的精确位置，对于static的元素没有效果。要使用这个CSS属性，必须为元素设置一个position值，而不能是默认的static定位方式。

在CSS中，可用的偏移属性有四个，包括top、right、bottom和left。

对于绝对定位的元素，即position属性设置为absolute的元素，left属性指定元素左侧边距边缘和包含该元素的容器的左侧边缘的距离。

对于相对定位的元素，即position属性设置为relative的元素，left属性指定元素的左侧边界离开其正常位置的距离。

对于固定定位或sticky定位的元素，left属性指定元素到视口左侧边缘的距离。

官方语法

left: | | auto

参数：

：使用固定的长度值指定元素的左侧偏移。长度值可以参考数据类型。长度值允许为负数。

：使用元素的包含块的百分比值来指定左侧偏移值。百分比值可以参考数据类型。百分比值允许为负数。

auto：当left属性设置为auto的时候，分为两种情况：

如果元素是相对定位的，在水平方向上会根据right属性的值来定位。如果right属性也设置为auto，那么元素在水平方向上不会移动。

如果元素是绝对定位的，在垂直方向上会根据right属性的值来定位。如果元素的宽度设置为auto，那么元素的宽度会随着内容的增加而增长。

left属性的初始值为auto。

left属性可以使用inherit属性从它的父元素中继承左侧偏移值。它的父元素不一定是它的定位上下文。

应用范围

left属性可以应用在所有可以被定位的元素上。

示例代码

/* 使用长度值 */

left: 3px

left: 2.4em

/* 使用元素包含块的百分比值 */

left: 10%

/* 使用关键字 */

left: auto

left: inherit

在线演示

1、在相对定位的元素上使用left属性：

Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat. Ut wisi enim ad minim veniam, quis nostrud exerci tation ullamcorper suscipit lobortis nisl ut aliquip ex ea commodo consequat.Duis autem vel eum iriure dolor in hendrerit in vulputate velit esse molestie consequat, vel illum dolore eu feugiat nulla facilisis at vero eros et accumsan et iusto odio dignissim qui blandit praesent luptatum zzril delenit augue duis dolore te feugait nulla facilisi.

2、在绝对定位的元素上使用left属性：

Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat. Ut wisi enim ad minim veniam, quis nostrud exerci tation ullamcorper suscipit lobortis nisl ut aliquip ex ea commodo consequat.Duis autem vel eum iriure dolor in hendrerit in vulputate velit esse molestie consequat, vel illum dolore eu feugiat nulla facilisis at vero eros et

---