canvas

Canvas学习笔记

基本知识-关于矩形：

context: context是一个封装了很多绘图功能的对象，获取这个对象的方法是
var context=canvas.getContext('2d');
html5 不提供3d服务

创建一个简单的画布，width,height 定义了画布的大小

<canvas id="myCanvas" width="600" height="300"></canvas>

接着我们来画一个简单到掉渣的矩形,fillStyle-填充的样式，rect(x,y,w,h)--前两个是x与y轴的偏移量，后两个值是矩形的宽度和高度，fill()--填充当前绘图。先把填充样式写好，再把矩形范围定义，最后填充当前的绘图；如果不设置填充的样式fillStyle,那么默认的填充样式是黑色-black

<script>
   var canvas = document.getElementById('myCanvas');
   var context = canvas.getContext('2d');
   context.fillStyle='red';
   context.rect(10,20,100,100);
   context.fill();
</script>

往下走，我们继续画一个带边框的矩形我们上面画的红色的矩形加一个边框，这时候就用到了stroke()--绘制已经定义的路径，
给边框设置颜色为绿色，默认是黑色。只需要在上面的代码加上一句

 context.strokeStyle='green';
 context.stroke();

ok，边框已经有了 接下来我又不想要填充颜色 只想要边框 那么更简单 直接上代码 ！ strokeRect(x,y,w,h)--绘制图形 无填充

context.strokeRect(10,10,100,100);

相对于strokeRect()，还有就是fillRect(x,y,w,h)-- 绘制填充的矩形
既然有绘制自热还有清楚的属性clearRect(x,y,w,h)-- 在给定的矩形内清除指定的像素

    context.clearRect(10,10,80,80);

总结：

关于矩形的方法 rect() -- 创建矩形
               fillRect() -- 绘制被填充的矩形
               fillStyle -- 定义填充的颜色
               fill() -- 填充当前的绘图
               strock() -- 绘制已定义的路径
               strockRect() -- 绘制无填充的矩形
               strockStyle -- 设置或返回用于笔触的颜色、渐变或模式(之前用来定义边框的颜色，只是用途之一)
               clearRect() -- 在给定的矩形内清除指定的像素