Canvas
2019-04-16 本文已影响0人
隔壁老樊啊
canvas简介
HTML5 的 canvas 元素使用 JavaScript 在网页上绘制图像。
画布是一个矩形区域，您可以控制其每一像素。
canvas 拥有多种绘制路径、矩形、圆形、字符以及添加图像的方法
基本使用
canvas标签
<canvas height="300" width="300"></canvas>
canvas标签会帮我们在页面中创建一个画布，这个画布是没有背景颜色的，所以创建完canvas页面也不会有任何显示，它默认是有宽高的width为300、height为150。我们可以直接在canvas标签中设置宽高。
image.png
渲染上下文
<canvas> 元素创造了一个固定大小的画布，它公开了一个或多个渲染上下文，其可以用来绘制和处理要展示的内容。我们将会将注意力放在2D渲染上下文中。其他种类的上下文也许提供了不同种类的渲染方式。
我个人理解为获取绘画工具，里面有很多工具，用来在画布上作画用。
/*获取元素*/
var myCanvas = document.querySelector('canvas')
/*获取绘图工具*/
var ctx= myCanvas.getContext('2d');
检查支持性
canvas他有浏览器兼容问题，我们在使用的时候最好检测一下当前浏览器是否支持canvas
var myCanvas = document.querySelector('canvas')
if (myCanvas.getContext){
var ctx = canvas.getContext('2d');
// drawing code here
} else {
// canvas-unsupported code here
}
canvas 模板骨架
<html>
<head>
<title>Canvas tutorial</title>
<style type="text/css">
canvas { border: 1px solid black; }
</style>
</head>
<body >
<canvas width="300" height="300"></canvas>
</body>
<script type="text/javascript">
var myCanvas = document.querySelector('canvas')
if (!myCanvas.getContext) return
var ctx = canvas.getContext("2d");
//开始代码
</script>
</html>
常用的绘制API
路径绘制
- 描边
stroke() - 填充
fill()
image.png
路径闭合
- 闭合路径
- 手动闭合
- 程序闭合
closePath()
开启新路径
beginPath()
样式设置
+lineWidth 线宽，默认1px
-
lineCap线末端类型：(butt默认)、round、square
+lineJoin相交线的拐点miter(默认)、round、bevel -
strokeStyle线的颜色 -
fillStyle填充颜色 -
setLineDash()设置虚线 -
getLineDash()获取虚线宽度集合
+lineDashOffset设置虚线偏移量（负值向右偏移）
图形绘制
矩形绘制
-
rect(x,y,w,h)没有独立路径 -
strokeRect(x,y,w,h)有独立路径，不影响别的绘制 -
fillRect(x,y,w,h)有独立路径，不影响别的绘制
+clearRect(x,y,w,h)擦除矩形区域
圆弧绘制
- 弧度概念
- arc()
- x 圆心横坐标
- y 圆心纵坐标
- r 半径
+startAngle开始角度 -
endAngle结束角度
+anticlockwise是否逆时针方向绘制（默认false表示顺时针；true表示逆时针）
绘制文本
-
ctx.font= '微软雅黑' 设置字体 strokeText()-
fillText(text,x,y,maxWidth)- text 要绘制的文本
- x,y 文本绘制的坐标（文本左下角）
- maxWidth 设置文本最大宽度，可选参数
-
ctx.textAlign文本水平对齐方式，相对绘制坐标来说的- left
- center
- right
- start 默认
- end
-
ctx.direction属性css(rtl ltr) start和end于此相关- 如果是
ltr,start和left表现一致 - 如果是
rtl,start和right表现一致
- 如果是
-
ctx.textBaseline设置基线（垂直对齐方式 ）
+top文本的基线处于文本的正上方，并且有一段距离
+middle文本的基线处于文本的正中间-
bottom文本的基线处于文本的证下方，并且有一段距离
+hanging文本的基线处于文本的正上方，并且和文本粘合 -
alphabetic默认值，基线处于文本的下方，并且穿过文字 -
ideographic和bottom相似，但是不一样
-measureText()获取文本宽度obj.width
-
更多文章访问个人博客：http://www.lfanliu.top
