1. 给canvas设置宽高:
    canvas标签的宽高默认是300*150,是一个行内块元素
    可以在canvas标签上通过width,height来设置
    可以在js中给dom对象设置:

      mycanvas.width = 500
    mycanvas.height = 500

    注意:不要通过css来调整canvas的宽高,导致内部的canvas画布被拉伸,图形变形

    1. 获取画笔工具:
      canvas绘图都是通过canvas标签的画笔来进行的

      var ctx = canvas.getContext('2d')

      注意,不要写成getContent,里面传入的参数目前也只有2d这一种情况

3、 描边和填充

canvas绘制图形都是绘制的路径,看不见摸不着的一种东西,需要进行描边或填充之后才能看到真正的图形
如果绘制图形的路径在绘制完成后没有闭合,继续绘制路径的时候会首尾相连
在填充的时候如果路径依然没有闭合,会将路径的闭合区域填充 ctx.fill()//填充
ctx.stroke()//描边 可以调整ctx.strokeStyle,ctx.fillStyle属性来更改填充,描边的颜色,值为颜色值(rgb,rgba,word,16进制)
    1. 绘制矩形
      ctx.rect(x,y,w,h)
      canvas的坐标系起点是左上角,x轴向右正方向,y轴向下正方向
      x,y代表的是矩形起点(左上角)的位置,w,h就是宽高
      可以使用strokeRect,fillRect方法直接绘制一个填充、描边的矩形
    1. 清楚矩形区域以及动画原理
      ctx.clearRect(x,y,w,h)可以清除某一个矩形区域的图形
      canvas实现动画的原理就是不断的绘制和擦除来实现

         var ctx = canvas.getContext("2d")
      let x=0,y=0;
      ctx.fillRect(x,y,50,50)
      setInterval(function () {
      //绘制新的图形前擦掉之前的
      ctx.clearRect(0,0,canvas.width,canvas.height)
      x++;y++;
      //不断绘制新图形
      ctx.fillRect(x,y,50,50)
      },30)

    canvas基础知识点(一)的更多相关文章

    1. canvas API ,通俗的canvas基础知识(一)

      在没学canvas的时候,觉得canvas是这么的神秘,这么的绚丽,这么的高深,用canvas做出来的效果是如此的炫酷,能做的事情如此的宽广,简直让我心生敬畏之心,时常感叹:我要是得此技能,必定要上天 ...

    2. HTML5移动开发学习笔记之Canvas基础

      1.第一个Canvas程序 看的是HTML5移动开发即学即用这本书,首先学习Canvas基础,废话不多说,直接看第一个例子. 效果图为: 代码如下: <!DOCTYPE html> < ...

    3. fastclick 源码注解及一些基础知识点

      在移动端,网页上的点击穿透问题导致了非常糟糕的用户体验.那么该如何解决这个问题呢? 问题产生的原因 移动端浏览器的点击事件存在300ms的延迟执行,这个延迟是由于移动端需要通过在这个时间段用户是否两次 ...

    4. .NET基础知识点

      .NET基础知识点   l  .Net平台  .Net FrameWork框架   l  .Net FrameWork框架提供了一个稳定的运行环境,:来保障我们.Net平台正常的运转   l  两种交 ...

    5. JavaScript 开发者经常忽略或误用的七个基础知识点(转)

      JavaScript 本身可以算是一门简单的语言,但我们也不断用智慧和灵活的模式来改进它.昨天我们将这些模式应用到了 JavaScript 框架中,今天这些框架又驱动了我们的 Web 应用程序.很多新 ...

    6. JavaScript 开发者经常忽略或误用的七个基础知识点

      JavaScript 本身可以算是一门简单的语言,但我们也不断用智慧和灵活的模式来改进它.昨天我们将这些模式应用到了 JavaScript 框架中,今天这些框架又驱动了我们的 Web 应用程序.很多新 ...

    7. canvas基础之旅

      canvas 主要使用2D rendering context  API 实现其功能和特效. canvas 一般浏览器都支持,但在ie9之前的是不支持的.(解决办法:添加IxplorerCanvas ...

    8. canvas 基础知识整理(二)

      html部分: <canvas id="myCanvas" width="800" height="800" ></can ...

    9. canvas 基础知识整理(一)

      canvas这个 HTML 元素是为了客户端矢量图形而设计的.它自己没有行为,但却把一个绘图 API 展现给客户端 JavaScript 以使脚本能够把想绘制的东西都绘制到一块画布上. html的基本 ...

    随机推荐

    1. JS基础_相等运算符

      <!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title> ...

    2. LCN分布式事务管理(一)

      前言 好久没写东西了,9月份换了份工作,一上来就忙的要死.根本没时间学东西,好在新公司的新项目里面遇到了之前没遇到过的难题.那遇到难题就要想办法解决咯,一个请求,调用两个服务,同时操作更新两个数据库. ...

    3. The method getContextPath() from the type HttpServletRequest

      在做java项目开发的时候,jsp页面很容易报出这个错误. 错误的原因很多,但是都和JRE有关. 一般在导入项目的时候容易报出这个错误,主要因为JRE(jdk版本不一致). 解决方法:就是重新配置路径 ...

    4. PHP之50个开源项目

      GitHub上50个最受欢迎的PHP开源项目[2019] 1.Laravel Laravel是一个为Web开发者打造的PHP开发框架. GitHub Stars: 43.5k+ 网址: https:/ ...

    5. 不再显示广告案例(php操作cookie)

      1,页面简单结构搭建 ad.html <!DOCTYPE html> <html lang="en"> <head> <meta char ...

    6. 关于MVC与MVP的理解

      1. MVC的理解误区 理解误区: 1. 认为Model是指失血模型的实体类(Entity),是作为View和Controller之间的传输数据. 2. 把业务逻辑全部放在Controller端,认为 ...

    7. php--常见算法1

      <?php //递归输出123321 function digui($num){ echo $num; if($num<3){ digui($num+1); } echo $num; } ...

    8. Delphi ADO组件

      樊伟胜

    9. 逆向破解H.Koenig 遥控器 Part 2

      逆向破解H.Koenig 遥控器 Part 2 到目前为止,我们已经知道了RF收发器的安装过程,下面是我们所掌握的东西 : l 无线电收发器是一个Avantcom A7105 l 调制是FSK l 频 ...

    10. linux基础—课堂随笔07_磁盘存储和文件系统

      磁盘管理 管理分区 列出块设备  lsblk parted命令 高级分区操作 用法:  parted [选项]... [设备 [命令 [参数]...]...]  parted /dev/sdb mkl ...