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

canvas(画布)是html5出现的新标签,像所有的dom对象一样,它也有自己本身的属性、方法和事件,其中就有绘图的方法,js能够调用它来进行绘图。
学canvas相当于是将PS中画图变成用代码来画。
canvas能做的事情有:绘制形状、开发游戏、合成图片、签字。。。
canvas只是一个画布,剩下的工作需要使用JS来完成。

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”或者微信扫描二维码都可以关注微信公众号

WEB前端全栈圈
除特别声明外, 本站所有内容皆为原创,未经许可,禁止转载。转载时请务必以超链接形式标明文章出处和作者信息
  • 1,013
(2)
打赏 微信扫一扫 微信扫一扫
                       

关于作者:

web前端老罗

贡献:已经在WEB前端圈发表90篇文章了

简介:前端老罗是一位拥有多年web前端开发经验、管理经验、教学经验的实战派全栈工程师。目前在某名企任职WEB前端技术教官。加我微信:imqdcnn可提供开发、技术咨询、答疑、直播讲座等服务

Ta的专栏 | Ta的站点 | 其他SNS

发表回复

您的电子邮箱地址不会被公开。 必填项已用 * 标注

关于WEB前端圈

我是前端人(imqd.cn)愿景是不管你是想学习前端还是一名专业的WEB前端工程师在这里都能找到你想要的物料。定位为前端人学习进步的一个平台。在这里你能找到前端学习笔记、教学视频资源、案例、前后端分离、前端框架、低代码平台、可视化数据、多端开发、全栈开发等跟前端有关的一切资源!

关于站长:WEB前端老罗(罗老师)是一位拥有多年web前端开发经验、管理经验、IT培训教学经验的实战派全栈工程师。目前在某名企任职WEB前端技术教官。右边加我微信可提供开发、技术咨询、答疑、直播讲座等服务

WEB前端圈二维码

右边添加老罗微信一对一免费私聊
拉你加入官方微信答疑群

To top