canvas基础
创建canvas之前首先得创建一个html canvas标签
<canvas id="canvas" width="400" height="500"></canvas>
1.画布环境
<script type="text/javascript">
// 首先获取canvas对象
var canvas = document.getElementById('canvas');
// 通过canvas对象的getContext方法创建一个2d画布
var ctx = canvas.getContext('2d');
</script>
在H5中创建的的canvas标签只是提供了画布创建的基础环境,而并未真正意义创建画布。创建画布的工作全由H5提供给js的API完成。
2.canvas中颜色和坐标系统
颜色系统:
- 直接用颜色名称:”red” “green” “blue” “yellow”等
- 十六进制颜色值:”#FF0000”
- RGB颜色系统:rgb(1-255,1-255,1-255)
- RGBA颜色透明度系统: rgba(1-255,1-255,1-255,透明度)
坐标系统:
canvas坐标系是一个二维的平面坐标系。原点坐标(0,0)在canvas画布
的左上角位置上,沿着水平方向向右是X轴正方向,垂直方向向
下是Y轴正方向。
3.矩形API
ctx.rect(x,y,width,height); 创建矩形(并未进行任何填充和描边)
<script type="text/javascript">
// 首先获取canvas对象
var canvas = document.getElementById('canvas');
// 通过canvas对象的getContext方法创建一个2d画布
var ctx = canvas.getContext('2d');
// 通过rect创建一个矩形
ctx.rect(20,20,150,100);
// 填充矩形
ctx.fill();
// 描边
ctx.stroke();
</script>
ctx.fillRect(x,y,width,height); 创建一个填充的矩形
<script type="text/javascript">
// 首先获取canvas对象
var canvas = document.getElementById('canvas');
// 通过canvas对象的getContext方法创建一个2d画布
var ctx = canvas.getContext('2d');
// 通过fillRect创建一个填充的矩形
ctx.fillRect(0,0,100,100);
</script>
ctx.strokeRect(x,y,width,height); 创建一个描边的矩形
<script type="text/javascript">
// 首先获取canvas对象
var canvas = document.getElementById('canvas');
// 通过canvas对象的getContext方法创建一个2d画布
var ctx = canvas.getContext('2d');
// 通过strokeRect创建一个描边的矩形
ctx.strokeRect(100,100,100,100);
</script>
ctx.clearRect(x,y,width,height); 清除画布上一块指定矩形区域的的像素
<script type="text/javascript">
// 首先获取canvas对象
var canvas = document.getElementById('canvas');
// 通过canvas对象的getContext方法创建一个2d画布
var ctx = canvas.getContext('2d');
// 通过clearRect清除一块指定区域的像素
ctx.clearRect(20,20,50,40);
</script>