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. 基于APR模式的Tomcat8环境部署

      1.版本信息 组件名 版本号 jdk 1.8.111 tomcat 8.5.9 apr 1.6.3 apr-iconv 1.2.2 apr-util 1.6.2 tomcat-native 1.2.1 ...

    2. 无障碍开发(六)之ARIA在HTML中的使用规则

      ARIA使用规则一 如果你使用的元素( HTML5 )具有语义化,应该使用这些元素,而不应该重新定义一个添加ARIA的角色.状态或属性的元素. 浏览器的语义化标签已经默认隐含ARIA语义,像nav,a ...

    3. Excel学习笔记:行列转换

      目录 offset函数 行列转换的三种方式 1.右键转置 2.转置公式TRANSPOSE 3.引用函数OFFSET+ROWS/COLUMN(支持随时更新数据) 一行(列)转多行多列 offset函数 ...

    4. 一点css 基础

      css 行内样式优先度最高 margin 属性 为声明外边距 如图 顺序依次为上右下左

    5. Gephi简单导入数据

      使用工具 Gephi-0.9.2 事前要导入的数据 Node.csv 节点:名称可以所以定,格式.csv Edge.csv 边:名称可以所以定,格式.csv 导入操作 新建项目 导入节点 新建列要与表 ...

    6. Java面向对象(二)

      面向对象(Object Oriented) Java支持面向对象三大特性:封装.继承.多态.(抽象)1.封装(Encapsulation)封装:隐藏对象内部的复杂性,只对外公开简单的接口.便于外界调用 ...

    7. 记一次自启动的docker容器将宿主机的开机用户登录界面覆盖事件

      宿主机的系统为CentOS7_7.7.1908,默认为GUI启动,安装了宝塔面板,docker-ce为最新版. 在启动了一个centos7的容器(镜像为centos官方镜像)后,将该容器重启策略设置为 ...

    8. 排序算法之快速排序QuickSort

      挖坑填数-快速排序 1. left = L,right = R;将基准数挖出形成第一个坑s[left]; 2. right --; 由后向前找比它小的数,找到后挖出此数填前一个坑s[left]中. 3 ...

    9. linux基础—课堂随笔06_软件包管理

      软件包管理 rpm 包和包管理器 包的组成:  二进制文件.库文件.配置文件.帮助文件 程序包管理器:  debian: deb文件,dpkg包管理器  redhat:rpm文件,rpm包管理器  r ...

    10. 小程序UI设计(7)-布局分解-左-上下结构

      FlexBox布局中的变幻方式很多,我们继续了解一个左-上下结构的布局分解  左边结构树中WViewRow下面有两个WViewColumn.WViewRow是横向排列,WViewColumn是纵向排列 ...