canvas自学笔记

最新推荐文章于 2024-07-21 17:23:08 发布

阿飞590

最新推荐文章于 2024-07-21 17:23:08 发布

阅读量95

点赞数

文章标签： html css 前端

原文链接：https://developer.mozilla.org/zh-CN/docs/Web/API/Canvas_API/Manipulating_video_using_canvas

版权

创建一个canvas标签

<canvas width="200px" height="150px" id="canvas"><canvas>
//画布的大小直接加   通过css修改需要按照2：1的比例   不然会导致画布扭曲

有宽度和高度两个属性，默认为宽300px,高度为150px
默认比例为2：1
注意：如果你绘制出来的图像是扭曲的，尝试用 width 和 height 属性为明确规定宽高，而不是使用 CSS。

元素与标签的不同之处在于，就像，，或者元素一样，很容易定义一些替代内容。由于某些较老的浏览器（尤其是 IE9 之前的 IE 浏览器）或者文本浏览器不支持 HTML 元素"canvas"，在这些浏览器上你应该总是能展示替代内容。

这非常简单：我们只是在标签中提供了替换内容。不支持的浏览器将会忽略容器并在其中渲染后备内容。而支持的浏览器将会忽略在容器中包含的内容，并且只是正常渲染 canvas。

举个例子，我们可以提供对 canvas 内容的文字描述或者是提供动态生成内容相对应的静态图片，如下所示：

<canvas id="stockGraph" width="150" height="150">
  current stock price: $3.15 +0.15
</canvas>

<canvas id="clock" width="150" height="150">
  <img src="images/clock.png" width="150" height="150" alt=""/>
</canvas>

浏览器高于IE9的时候不要尝试，你终究会失败毕竟它不会显示出来

getContext() 的方法，这个方法是用来获得渲染上下文和它的绘画功能。

检查是否兼容canvas

if (canvas.getContext){
  var ctx = canvas.getContext('2d');
  // drawing code here
} else {
  // canvas-unsupported code here
}

属性

起点：moveTo(x,y)

终点：lineTo(x,y)

注意：当前路径为空，即调用 beginPath() 之后，或者 canvas 刚建的时候，第一条路径构造命令通常被视为是 moveTo（），无论实际上是什么。出于这个原因，你几乎总是要在设置路径之后专门指定你的起始位置。

来连结终点与起点：stroke（）

闭合路径 closePath()：这个方法会通过绘制一条从当前点到开始点的直线来闭合图形。如果图形是已经闭合了的，即当前点为开始点，该函数什么也不做。
（当你调用 fill() 函数时，所有没有闭合的形状都会自动闭合，所以你不需要调用 closePath() 函数。但是调用 stroke() 时不会自动闭合。）

fillRect(x, y, width, height)
//绘制一个填充的矩形

strokeRect(x, y, width, height)
//绘制一个矩形的边框

clearRect(x, y, width, height)
//s清除指定矩形区域，让清除部分完全透明。
beginPath()
//新建一条路径，生成之后，图形绘制命令被指向到路径上生成路径。

closePath()
//闭合路径之后图形绘制命令又重新指向到上下文中。

stroke()
//通过线条来绘制图形轮廓。

fill()
//通过填充路径的内容区域生成实心的图形。

//fill   总来做内容填充   stroke+closePath是用来做描边

arc()

在使用arc这个方法之前，你一定要知道arc方法中参数是代表什么意思
arc() 方法创建弧/曲线（用于创建圆或部分圆）。
提示：如需通过 arc() 来创建圆，请把起始角设置为 0，结束角设置为 2Math.PI。
提示：请使用 stroke() 或 fill() 方法在画布上绘制实际的弧。

绿色中心： arc(100,75,50,0Math.PI,1.5Math.PI)
红色起始角： arc(100,75,50,0,1.5Math.PI)
蓝色结束角： arc(100,75,50,0Math.PI,1.5Math.PI)

context.arc(x,y,r,sAngle,eAngle,counterclockwise);

参数描述

备注： arc() 函数中表示角的单位是弧度，不是角度。角度与弧度的 js 表达式：

弧度=(Math.PI/180)角度
2Math.PI 为一圈
0.5Math.PI为四分之一圆
1Math.PI为半圆 === Math.PI

context.arc(x,y,r,sAngle,eAngle,counterclockwise);

x => 圆的中心的 x 坐标。
y => 圆的中心的 y 坐标。
r => 圆的半径。
sAngle => 起始角，以弧度计（弧的圆形的三点钟位置是 0 度）。
eAngle => 结束角，以弧度计。
counterclockwise =>> 可选。规定应该逆时针还是顺时针绘图。False = 顺时针，true = 逆时针。