一篇文章带你制作 canvas 小游戏 (1)

首先我们先学习 canvas 的基本用法与属性 !

canvas就是 html5 提供的一个标签,他就是一个画布的作用,
可以用来通过js代码绘制的内容!

canvas 默认的尺寸为 : 300 *150 ;

浏览器不兼容 canvas 的时候 ,canvas标签中的内容才会被显示出来

canvas 使用步骤:
1.获取到canvas 标签
2.获取到 当前canvas 标签的绘制上下文;
var ctx=cv.getContext('2d')  // 上下文
//getContext 可以被看成是一个工厂函数
3.调用上下文(对象)中的绘制 API进行绘制

简单绘制一条线步骤:
moveTo  // 将canvas 的画笔移动到某个起始点(x,y)

ctx.moveTo(100,100);

如果没有moveTo  第一个lineTo就相当于 moveTo;

描绘路径:
ctx.lineTo(300,100)   //(x,y)

描边:
ctx.stroke() //将已经描绘的路径绘制到画布中
____________________________

canvas 设置宽高的说明:

只有 两中方式:
canvas 宽度和高度 // 指当前画布的垂直方向 和 水平方向的像素点的个数;

1.在canvas标签中通过HTML属性来进行设置;


2.通过 js操作DOM 对象的width和height属性
cv.height=400; cv.width=600;

canvas 不能通过样式来进行设置高度和宽度!!!(因为改变了每个像素点的大小)
____________________________

canvas 坐标系说明:

坐标系 以当前画布的左上角为原点

x,向右 变大  , y轴向下 变大;
____________________________

canvas 上下文:

ctx  就相当于画图软件中的工具栏(提供大量绘图工具)

ctx  就相当于 绘制图形的相关的各种API
____________________________

3D图形上下文
cv.getContext('webgl') //浏览器端处理3D图形的

绘制填充图形:
ctx.fill();  // 没有闭合 ,会自动将图形闭合在填充

设置描边样式:
ctx.strokeStyle='green';
ctx.stroke();

设置填充样式:
ctx.fillStyle='#fff';
ctx.fill();

开启新路径:
ctx.beginPath(); //相当于将之前绘制上下文中描绘的路径清除掉

非零环绕原则:
用来查看某个区域是否被填充的原则;
从要查看的区域引出一条射线,穿过整个图形,让这条线与图文相交;
以射线起点为圆心,顺着线绘制方法画圆;
逆时针 -1 ;  正时针 +1;
结果相加 : 为 0 说明此处不绘制 !!!    不为 0 说明绘制;

闭合路径:
ctx.closePath();
仅仅是在当前路径起始位置与结束位置之间做一条连线;

快速绘制矩形:
ctx.rect(x,y,w,h) // x坐标 ,y坐标 ,宽 , 高 /仅仅描绘路径;
//下面这两种方法不产生路径;
ctx.strokeRect(x,y,w,h); // 快速绘制描边矩形;
ctx.fillRect(x,y,w,h); //快速绘制填充矩形;

清除矩形:
ctx.clearRect(x,y,w,h);  //檫除画布中展示的内容
canvas的API中,只提供了一个清除绘制内容的方法:clearRect
作用:清除某个矩形区域里面的内容,仅仅是檫除展示的内容,
不会影响路径;

canvas画图的方式:
绘制的时候是将整个画布的内容绘制出来 ,擦除的时候也是将
整个画布内容全部擦除,然后在重新绘制;
ctx.clearRect(0,0,cv.width,cv.height)  //清空整个画布
____________________________

canvas 绘图: 
是基于状态的!
路径和状态是完全不同的内容,不会互相影响!
开启新的路径(beginPath),不会影响到状态
____________________________

设置线宽:
ctx.lineWidth=1;

默认线宽为1 像素,但是在画布中展示出来的是 2像素;(并且颜色会变淡)

屏幕中展示内容的最小单位是像素,最少也要展示1像素,通过canvas绘制
线的时候,是以当前坐标为中心点,分别向两边扩展线宽的一半(线宽为1,
会扩展0.5像素) ;屏幕会分别向上向下扩展1像素;并且颜色变淡;

绘制一像素的宽度的线,从0.5开始绘制即可!

绘制圆弧:
ctx.arc(x,y,radius,startAngle,endangle,anticlockwise)
圆心点的 x,y 坐标// 半径的长度 //开始和结束的弧度
//绘制方向(默认顺false)

弧度 和角度的关系:

1弧度 表示180度; 用π来表示弧度;  1π=180°
//Math.sin() / Math.cos() 参数也是弧度

角度:angle  弧度:radian
角度转弧度公式: radian = angle / 180 * π;
弧度转角度公式: angle = radian / π * 180 ;
____________________________

绘制文字:
1. strokeText(text);
ctx.strokeText('文字',100,100)
ctx.font=''; //设置文字 字体 大小
ctx.measureText() //计算文字的宽度

2. fillText(text);
文字对齐方式:
文字水平对齐方式 
ctx.textAlign='right/start/center'  
默认start左对齐

//文字从右往左/相反

end 与start 完全相反;

ctx.textBaseline  // 文字垂直对齐方式
小写字母x底边为文字的基线
____________________________
绘制图片
ctx.drawImage(image,dx,dy);
(表示一个图片图像,x,y坐标)

步骤:
1. var img =document.createElement('img'); // var img=new Image();
2. img.src='路径';
3. img.οnlοad=function(){  ctx.drawImage(img,0,0); }  // load事件
本篇文章连载 , 纯手打 , 欢迎改正!