1.canvas初体验
1.1.canvas 是什么
canvas是html5新增的一个元素，配合宽度和高度属性定义出一个可绘图的区域，JavaScript可以访问该区域，通过一套完整的绘图函数来动态生成图形。canvas的应用包括绘制图形、绘制图表、制作动画效果、进行游戏开发等
总结：本质上canvas是一个html5元素，需要通过JavaScript来操作才能实现各种功能，只是一个canvas元素没有实际效果
1.2.canvas绘制图形步骤
使用canvas来绘制图形通常需要经过下面三步：
1. 需要有一个canvas标签，通过js来获取到canvas对象
2. 获取到上下文对象
3. 使用函数来绘图
实例：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Document</title>
<style>
#cvs{
border: 1px solid #ddd;
}
</style>
</head>
<body>
<canvas width="500" height="300" id="cvs"></canvas>
<script>
// 1. 获取到canvas对象
var oCanvas = document.getElementById('cvs')
// 2. 获取到上下文环境
var ctx = oCanvas.getContext('2d')
// 3. 开始绘制图形
// 3.1.把路径移动到画布中的指定点，不创建线条。
ctx.moveTo(100, 100)
// 3.2.添加一个新点，然后创建从该点到画布中最后指定点的线条,不会创建真正的线条
ctx.lineTo(200, 100)
// 3.3.实际地绘制出通过 moveTo() 和 lineTo() 方法定义的路径，即 描边
ctx.stroke()
</script>
</body>
</html>
1.3.css中设置宽高图像会被拉伸的问题
如果在css中去设置canvas的宽高，画出来的图形会被拉伸
<style>
#cvs{
border: 1px solid #ddd;
width: 600px;
height: 300px;
}
</style>
<canvas id="cvs"></canvas>
效果如图：
从上图中我们可以看出，画出来的图形比在canvas标签上设置宽高属性这种方式要更粗
最佳实践：设置canvas宽高的时候最好的方式就是在canvas元素身上加宽高属性，而不是在css中去设置canvas元素的宽高，这是因为canvas中还有一个绘图表面，我们绘制的图形实际上是绘制在绘图表面上的，用css去设置canvas元素的宽高，并不能同时设置好绘图表面的宽高（这里的宽高默认300*150）
1.4.2d绘图环境
canvas元素其实只是绘图环境的一个容器，真正要实现各种图形的绘制需要依靠绘图环境对象，这个环境对象提供了全部的绘制功能。目前，我们使用的是2d的绘图环境，这个2d的绘图环境对象提供了强大的api，如下
canvas : 指向该绘图环境所属的canvas对象
fillstyle : 指定改绘图环境后续的图形填充操作中所使用的颜色、渐变或图案
font : 设置字型
globalAlpha : 全局透明度设定
globalCompsiteOperation : 将某个物体绘制到其他物体之上时的绘制方式
lineCap : 绘制线段的端点
lineWidth : 绘制线段的宽度
lineJoin: 绘制两条线段相交时的焦点
miterLimit : 绘制miter形式线段的焦点
shadowBlur : 延伸的阴影效果
shadowColor : 阴影颜色
shadowOffsetX : 阴影水平偏移量
shadowOffsetY : 阴影垂直方向偏移量
strokeStyle : 对路径进行描边时所用的绘制风格
textAlign : 文本水平对齐方式
textBaseline : 文本垂直对齐方式
---------------------
这些属性可以通过控制台查看
//获取到canvas对象
var oCanvas = document.getElementById("canvas");
//获取到canvas的绘图环境
var oContext = oCanvas.getContext("2d");
console.log(oContext)
3万+
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
