canvas标签:
<canvas id="cavsElem" width="400" height="300">您的浏览器不支持canvas</canvas>
1.定义id属性是为了在JavaScript代码中引用元素
2.标签中间的文字在浏览器不支持canvas的情况下才会显示
3.canvas标签与img标签一样,有两个原生属性width和height
默认300*500像素
4.不要用css控制它的宽和高,否则可能会引起画布上的图形变形
要在画布中绘制图形,首先要通过JavaScript的getElementById()函数
获取到网页中的画布对象
var canvas =document.getElementById(‘cavsElem’);
注:canvas画布默认为透明,背景色可以定义
准备画笔:
有了画布之后,开始作画需要准备画笔,这只画笔就是context对象,
context对象是画布的上下文,也叫作绘制环境,是所有的绘制操作API的
入口,该对象可以使用JavaScript脚本获得
var context=canvas.getContext('2d');
参数2d代表画笔的种类,这里用来执行二维操作,把参数替换为webgl,执行三维操作
坐标起始点:
var context=canvas.getContext('2d');
context.moveTo(x,y);
上述x,y都是相对于画布的最左上角,使用context对象的moveTo()方法
进行设置,相当于移动画笔到某个位置
绘制线条:
在canvas中使用lineTo()方法绘制直线:
context.lineTo(x,y);
"x,y"为线头点坐标,lineTo( )方法用于定义从x,y的位置绘制一条直线
到起点或者上一个线头点
路径:
路径是所有图形绘制的基础,例如绘制直线确定了起始点和线头点,便形成了一条绘制路径,如果绘制复杂路径,必须使用开始路径和闭合路径的方法
context.beginPath(); //开始路径
context.closePath(); //闭合路径
开始路径的核心作用是将不同线条绘制的形状进行隔离,每次执行此方法
表示重新绘制一个路径,同之前绘制的路径可以分开样式设置和管理
闭合路径会自动把最后的线头和开始的线头连在一起
描边:
在canvas图形绘制中,路径只是草稿,真正的绘制先必须执行stroke()方法
根据路径进行描边
context.storke();
利用Canvas绘制一个图形,基本步骤:
1.创建画布:<canvas></canvas>
2.准备画笔(获取上下文对象):canvas.getContext('2d');
3.开始路径规划:context.beginPath();
4.移动起始点:context.moveTo(x,y);
5.绘制线(矩形,圆形,图片...):context.lineTo(x,y)
6.闭合路径:context.closePath();
7.绘制路径:context.stroke();
绘制三角形:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<body>
<canvas id="cavsElem">
您的浏览器不支持,请升级浏览器
</canvas>
<script>
var canvas=document.getElementById(