Canvas
2017-06-09 本文已影响0人
Hathaway_桉
图片.png
图片.png
图片.png
<h1>2D上下文：</h1>
两种基本绘图操作是填充和描边。
- 描边
strokeStyle - 填充
fillStyle
</br>
<h1>绘制矩形：</h1>
矩形是一种可以直接在2D上下文中绘制的形状
- fillRect()
- strokeRect()
- clearRect()
</br>
<h1>绘制路径:</h1>
- 先调用beginPath()方法
- 然后调用下列方法绘制路径
- arc
- arcTo
- bezierCurveTo
- lineTo
- moveTo
- quadraticCurveTo
- rect
- 最后一步调用stroke()方法，才能把图形绘制到画布上
下面为绘制一个时钟：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
</head>
<body>
<canvas width="400" height="400" style='border:1px solid black' id="drawing">
</canvas>
<script>
var drawing=document.getElementById('drawing');
if(drawing.getContext){
var context=drawing.getContext("2d");
//开始路径
context.beginPath();
//开始外圆绘制
context.arc(200,200,100,0,2*Math.PI,false);
//开始内圆绘制
context.moveTo(290,200);
context.arc(200,200,90,0,2*Math.PI,false);
//开始绘制分针
context.moveTo(200,200);
context.lineTo(200,115);
//开始绘制时针
context.moveTo(200,200);
context.lineTo(140,200);
//描边路径
context.stroke();
if(context.isPointInPath(600,200)){
alert("在路径中");
}else{
alert("不在");
}
}
</script>
</body>
</html>
-
<h1>绘制文字</h1>
-
fillText()
-
strokeText()
两个方法拥有的共同属性：- font
- textAlign
- textBaseline
-
<h1>WebGL</h1>
WebGL是针对Canvas的3D上下文
WebGL支持比2D上下文更丰富和更强大的图形图像处理能力，比如：
- 用GLSL（OpenGL着色语言）编写的顶点和片段着色器
- 支持类型化数组，既能够将数组中的数据限定为某种特定的数值类型
- 创建和操作纹理
