Canvas学习记录
Canvas的基本用法
canvas元素
<canvas id="tutorial" width="150" height="150"></canvas>
canvas元素与img元素相似，但其没有src属性和alt属性。其只有两个属性width（默认值300像素）和height（默认值150像素）。如果没有为其设置宽度和高度时，那么将初始化为默认大小。
该元素可以使用CSS来定义大小，但在绘制时图像会伸缩以适应它的框架尺寸：如果CSS的尺寸与初始画布的比例不一致，它会出现扭曲。
id属性和class属性为所有HTML元素共有的，因此可以对canvas使用。
兼容性
-
替代内容
所谓替代内容也就是当浏览器无法正常显示canvas时用于替换的内容。
<!-- 初始宽度300像素 高度150像素 --> <canvas id="stockGraph" width="150" height="150"> <!-- 当浏览器兼容canvas时不显示里面的内容，不兼容时则显示其内容 --> current stock price: $3.15 +0.15 </canvas> -
编程性兼容
因为canvas是由js控制的，因此需要判断当前浏览器是否支持canvas。
var canvas = document.getElementById('stockGraph') // 判断当前浏览器是否兼容canvas if (canvas.getContext) { // canvas被支持 var ctx = canvas.getContext('2d') } else { // canvas不被支持 }
渲染上下文
canvas元素创造了一个固定大小的画布，它公开了一个或多个渲染上下文，其可以用来绘制和处理要展示的内容。
var canvas = document.getElementById('tutorial');
var ctx = canvas.getContext('2d');
一个简单的demo
<html>
<head>
<script type="application/javascript">
function draw() {
var canvas = document.getElementById("canvas");
if (canvas.getContext) {
var ctx = canvas.getContext("2d");
ctx.fillStyle = "rgb(200,0,0)";
ctx.fillRect (10, 10, 55, 50);
ctx.fillStyle = "rgba(0, 0, 200, 0.5)";
ctx.fillRect (30, 30, 55, 50);
}
}
</script>
</head>
<body onload="draw();">
<canvas id="canvas" width="150" height="150"></canvas>
</body>
</html>
使用canvas来绘制图形
绘制矩形
canvas提供了三种方法绘制矩形
-
fillRect(x,y,width,height)绘制一个填充的矩形
-
strokeRect(x,y,width,height)绘制一个矩形的边框
-
clearRect(x,y,width,height)
x与y表示距页面左上角的距离
<html>
<head>
<script type="application/javascript">
function draw() {
var canvas = document.getElementById('canvas');
if (canvas.getContext) {
var ctx = canvas.getContext('2d');
/*
(X,Y,width,height)
*/
// 绘制边长为100px的黑色正方形
ctx.fillRect(0, 0, 100, 100);
// 从正方形的中心开始擦除了一个60*60px的正方形
ctx.clearRect(20, 20, 60, 60);
// 在清除区域内生成一个50*50的正方形边框。
ctx.strokeRect(25, 25, 50, 50);
}
}
</script>
</head>
<body onload="draw();">
<canvas id="canvas" width="150" height="150"></canvas>
</body>
</html>
绘制路径
绘制路径的基本步骤：
- 首先，你需要创建路径起始点。
- 然后你使用画图命令去画出路径。
- 之后你把路径封闭。
- 一旦路径生成，你就能通过描边或填充路径区域来渲染图形。
所要用到的函数：
-
beginPath()新建一条路径，生成之后，图形绘制命令被指向到路径上生成路径。
-
closePath()闭合路径之后图形绘制命令又重新指向到上下文中。
-
stroke()通过线条来绘制图形轮廓。
-
fill()通过填充路径的内容区域生成实心的图形。
移动笔触
-
moveTo(x,y)将笔触移动到指定的坐标x以及y上。
对于这个函数可以想象一下在纸上作业，一支钢笔或者铅笔的笔尖从一个点到另一个点的移动过程。
当canvas初始化或者beginPath()调用后，你通常会使用moveTo()函数设置起点。我们也能够使用moveTo()绘制一些不连续的路径。
function draw() {
var canvas = document.getElementById('canvas');
if (canvas.getContext){
var ctx = canvas.getContext('2d');
ctx.beginPath();
ctx.arc(75, 75, 50, 0, Math.PI * 2, true); // 绘制
ctx.moveTo(110, 75);
ctx.arc(75, 75, 35, 0, Math.PI, false); // 口(顺时针)
ctx.moveTo(65, 65);
ctx.arc(60, 65, 5, 0, Math.PI * 2, true); // 左眼
ctx.moveTo(95, 65);
ctx.arc(90, 65, 5, 0, Math.PI * 2, true); // 右眼
ctx.stroke();
}
}
线
-
lineTo(x,y)绘制一条从当前位置到指定x以及y位置的直线。
圆弧
-
arc(x,y,radius,startAngle,endAngle,anticlockwise)画一个以（x,y）为圆心的以radius为半径的圆弧（圆），从startAngle开始到endAngle结束，按照anticlockwise给定的方向（默认为顺时针）来生成。
该方法有六个参数：
x,y为绘制圆弧所在圆上的圆心坐标。radius为半径。startAngle以及endAngle参数用弧度定义了开始以及结束的弧度。这些都是以x轴为基准。参数anticlockwise为一个布尔值。为true时，是逆时针方向，否则顺时针方向 -
arcTo根据给定的控制点和半径画一段圆弧，再以直线连接两个控制点。
arc()函数中表示角的单位是弧度，不是角度。角度与弧度的js表达式:弧度=(Math.PI/180)*角度。
<html>
<head>
<script type="application/javascript">
function draw() {
var canvas = document.getElementById('canvas');
if (canvas.getContext) {
var ctx = canvas.getContext('2d');
ctx.beginPath();
// 下半圆
ctx.arc(175, 75, 50, 0, Math.PI * 1, false);
// 上半圆
ctx.arc(75, 75, 50, 0, Math.PI * 1, true);
// 圆
ctx.arc(275, 75, 50, 0, Math.PI * 2, true)
ctx.fill()
}
}
</script>
</head>
<body onload="draw();">
<canvas id="canvas" width="850" height="150"></canvas>
</body>
</html>
参考
本文地址：https://blog.csdn.net/sviptzk/article/details/108582508