canvas基础入门教程-一只神秘的笔

canvas基础

学一个标签，其实是学的是一个对象。叫做canvas对象。

canvas(画布)是html5出现的新标签，像所有的dom对象一样，它也有自己本身的属性、方法和事件，其中就有绘图的方法，js能够调用它来进行绘图。

学canvas相当于是将PS中画图变成用代码来画。

回顾PS中如何画图：

1. 新建画布
2. 准备画笔（工具）
3. 画点什么
4. 上色：填充、描边等

canvas画图的步骤跟PS一样，只是用代码实现而已。

canvas能做的事情有：绘制形状、开发游戏、合成图片、签字。。。

canvas只是一个画布，剩下的工作需要使用JS来完成。

一、新建画布

<canvas id="ca" width="454" height="350">亲爱的，您的浏览器不支持canvas，请升级浏览器后再来</canvas>
<!--默认的宽度是300*150
注意事项：宽高不能写%，写了会把它当做固定单位来看待-->

二、准备画笔（工具）—js的事了

canvas只有一只2d画笔，所有的形状都通过该画笔来实现。

//获取canvas对象
//每写一个canvas标签，就相当于是生成了一个canvas对象
var ca=document.getElementById("ca");
//
//生成一只2D笔,该笔是canvas对象下的一个方法
var pen=ca.getContext('2d');

三、画点什么–学习pen的方法和属性了

可以画的东西有：

1. 矩形（正方形+长方形）

   a. 空心矩形

   pen.strokeRect(x,y,w,h);

   b. 实心矩形

   pen.fillRect(x,y,w,h);

   c.透明矩形—清除矩形–超实用

   pen.clearRect(x,y,w,h);
   //作用：
   1、做异形形状，比如
   2、刷新画布，清空画布（）

2. 路径
   通过路径可以绘制任何的形状，包括上面的矩形。是一个万能的画形状的方式。

   注意事项：路径需要描边或填充才能看到。

   在画路径之前，先使用

   pen.beginPath()

   画完后，可以使用

   pen.closePath()

   来结束，如果路径本身就是闭合了的，则该方法什么也不做。

   a. 直线、三角形、菱形等

   需要使用起点、第二个点、再连线实现（锚点连线）

   //起点
   pen.moveTo(x,y)
   比如：
   pen.moveTo(10,10);
   //第二个点起（包括终点和中间点）
   pen.lineTo(x,y);
   //描边
   pen.stroke();

   b. 圆、圆弧、半圆

   //语法：
   pen.arc(x, y,半径, 开始弧度,结束弧度, anticlockwise)
   //参数说明：
   0. x,y是圆心的位置
   1.anticlockwise 是否是逆时针：值为true时逆时针，false为顺时针[默认值]
   2.角度与弧度的js表达式:
   角度=弧度*180/Math.PI
   弧度=角度*Math.PI/180
   也就是2π弧度=360度
   1弧度？多少度
      1弧度==约57.32度
      1度==？弧度
   1度==0.017444弧度
   
   1、画一个正圆
   假设画布是500*500的尺寸，要画一个刚好能填充的圆：
      pen.beginPath();
      pen.arc(250,250,250,0,2*Math.PI);
      pen.fill()
      pen.closePath();
   2、画一个半圆
      pen.beginPath();
      pen.arc(250,250,250,0,Math.PI);
      pen.fill()
      pen.closePath();
   3、画一段圆弧（不填充）
      pen.beginPath();
      pen.arc(250,250,250,0,Math.PI);
      pen.stroke()
      pen.closePath();

   c. 路径矩形

   ctx.beginPath()
   //路径矩形
   ctx.rect(x,y,width,height)
   //给矩形描边
   ctx.stroke();
   //给矩形填充
   ctx.fill();
   //以上，可以实现一个描边+填充的矩形，可以代替最开始学的空心矩形和实心矩形

四、上色：填充、描边、边框粗细

1. 修改描边的颜色

   //在画东西之前就要先设置颜色
   pen.strokeStyle="合法的颜色名"

2. 修改边框粗细

   pen.lineWidth="数值"
   //比如：
   pen.lineWidth=5;

3. 修改、添加填充色

   pen.fillStyle="合法的颜色名"

4. 描边路径

   //在绘制路径后调用该方法
   pen.stroke();

5. 填充路径

   //在绘制路径后调用该方法
   pen.fill();

6. 开始绘制路径，调用以下方法

   pen.beginPath();

7. 结束绘制路径，调用以下方法（不是必须的）

   pen.closePath();

今日单词

1. canvas 帆布，画布
2. getContext 2D画笔方法
3. strokeRect 空心矩形
4. stroke 描边
5. strokeStyle 描边样式
6. fillRect 填充矩形（实心矩形）
7. clearRect 清除矩形
8. moveTo 起点（锚点）
9. lineTo 其他点 （锚点）
10. stroke 描边
11. beginPath() 开始路径
12. closePath() 结束路径

此资源下载链接已被无情的隐藏，请输入验证码解锁：

验证码

确定

请关注本站公众号回复“验证码”，获取验证码。

在微信里搜索“WEB前端全栈圈”或者“imqdcn”或者微信扫描二维码都可以关注微信公众号