Canvas基础讲义

今天先花点简单的篇幅和大家介绍下canvas。

1. 基本篇

1.1. 什么是 Canvas

canvas 是 HTML5 提供的一个用于展示绘图效果的标签. canvas 原意画布, 帆布. 在 HTML 页面中用于展示绘图效果. 最早 canvas 是苹果提出的一个方案, 今天已经在大多数浏览器中实现.

canvas 英 [‘kænv?s]  美 [‘kænv?s]   帆布 画布

1.1.1. canvas 的基本用法

基本语法

    <canvas></canvas>
  1. 使用 canvas 标签, 即可在页面中开辟一格区域. 可以设置其 width 和 height 设置该区域的尺寸.
  2. 默认 canvas 的宽高为 300 和 150.
  3. 不要使用 CSS 的方式设置宽高, 应该使用 HTML 属性.
  4. 如果浏览器不支持 canvas 标签, 那么就会将其解释为 div 标签. 因此常常在 canvas 中嵌入文本, 以提示用户浏览器的能力.
  5. canvas 的兼容性非常强, 只要支持该标签的, 基本功能都一样, 因此不用考虑兼容性问题.
  6. canvas 本身不能绘图. 是使用 JavaScript 来完成绘图. canvas 对象提供了各种绘图用的 api.

canvas 的使用领域

canvas 的使用领域很多:

  1. 游戏
  2. 可视化数据(重点)
  3. banner 广告
  4. 多媒体
  5. 未来
    • 模拟仿真
    • 远程操作
    • 图形编辑

1.1.2. 我们的目标

  1. 学会使用基本的 canvas api, 使用 canvas 可以完成简单的绘图
  2. 实现数据的可视化

1.2. 基本绘图

1.2.1. 基本绘图方法

绘图步骤

  1. 获得 canvas 对象.
  2. 调用 getContext 方法, 提供字符串参数 ‘2d‘.
  3. 该方法返回 CanvasRenderingContext2D 类型的对象. 该对象提供基本的绘图命令.
  4. 使用 CanvasRenderingContext2D 对象提供的方法进行绘图.
  5. 基本绘图命令
    • 设置开始绘图的位置: context.moveTo( x, y ).
    • 设置直线到的位置: context.lineTo( x, y ).
    • 描边绘制: context.stroke().
    • 填充绘制: context.fill().
    • 闭合路径: context.closePath().

01-绘制基本线

    var canvas = document.createElement( ‘canvas‘ );
    canvas.width = 500;
    canvas.height = 400;
    canvas.style.border = ‘1px dashed red‘;
    document.body.appendChild( canvas );
    // 获得 CanvasRenderingContext2D 对象
    var context = canvas.getContext( ‘2d‘ );
    // 设置 起点
    context.moveTo( 0, 0 );
    // 绘制直线
    context.lineTo( 500, 400 );
    // 设置 起点
    context.moveTo( 0, 400 );
    // 绘制直线
    context.lineTo( 500, 0 );
    // 描边显示效果
    context.stroke();

1.2.1.1. getContext 方法

语法: Canvas.getContext( typeStr )

描述:

  1. 该方法用于绘制上下文工具.
  2. 如果是绘制平面图形使用 ‘2d‘ 作为参数, 如果绘制立体图形使用 ‘webgl‘.
  3. 使用 ‘2d‘ 返回 CanvasRenderingContext2D 类型的对象.
  4. 使用 ‘webgl‘ 返回 WebGLRenderingContext 类型的对象.

1.2.1.2. moveTo 方法

语法: CanvasRenderingContext2D.moveTo( x, y )

描述:

  1. 该方法用于设置绘制起点.
  2. 其中参数 x, y 表示在坐标系中的位置, 分别是 x 坐标与 y 坐标.

1.2.1.3. lineTo 方法

语法: CanvasRenderingContext2D.lineTo( x, y )

描述:

  1. 该方法用于设置需要绘制直线的另一个点. 最终描边后会连线当前点和方法参数描述的点.
  2. 其中参数 x, y 表示在坐标系中的位置, 分别是 x 坐标与 y 坐标.

1.2.1.4. stroke 方法

语法: CanvasRenderingContext2D.stroke()

描述: 该方法用于连线, 将描述的所有点按照指定顺序连接起来.

1.2.1.5. 结论

  1. 绘图先要获得上下文, 即绘图工具
  2. 绘图需要设置开始的坐标
  3. 绘图是先描点, 然后一个一个依次连线
  4. 依次绘图只能绘制单一样式( 色彩等 )
 

时间: 2024-10-13 23:57:20

Canvas基础讲义的相关文章

canvas基础知识

低版本的ie不支持html5,需要引入excanvas.js来让ie支持canvas.检测<canvas id="canvas" width="150" height="200" > 你的浏览器不支持canvas</canvas>var canvas = document.getElementById('canvas');if(canvas.getContext) alert('支持canvas'); >> 绘

canvas基础绘制-绚丽倒计时

效果图: html: <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>ball</title> <script src="digit_1.js"></script> <script src="countdown.js"></

canvas基础绘制-绚丽时钟

效果图: 与canvas基础绘制-绚丽倒计时的代码差异: // var endTime = new Date();//const声明变量,不可修改,必须声明时赋值: // endTime.setTime( endTime.getTime() + 3600*1000);//当前时间向后一小时: var curShowTimeSeconds = 0; function getCurrentShowTimeSeconds() { var curTime = new Date();//获取目前时间: /

五分钟学会 Canvas 基础(二)

0. 前言 相信各位小伙伴读了之前的文章,对 Canvas 基础已经有了一定的认识和了解,但是大家也一定记得我在上一篇文章留了一个小的坑. 就是我没有告诉大家该如何去绘制圆,之所以没有说是因为绘制圆实际上是因为 CanvasRenderingContext2D 对象只提供了两个绘制矩形的方法,并没有直接提供绘制圆,椭圆等几何图形的方法.为了在 Canvas 上绘制更复杂的方法,必须在 Canvas 上启用路径,借用路径来绘制图形. 那么我们现在就一起来看一看,该如何使用路径来绘制圆等图形吧. -

Android Graphics专题(1)--- Canvas基础

作为Android Graphics专题的开篇,毫无疑问,我们将讨论Android UI技术的核心概念--Canvas. Canvas是Android UI框架的基础,在Android的控件体系中,所有容器类.控件类在实现上都依赖于Canvas,界面的绘制实质上都是Canvas绘制的.本文将讨论Canvs的由来,并通过实例展示Canvas的基础用法. 对于应用开发而言,我们可以不去深究Canvas与Android 控件体系的实现细节,但明白Canvas与控件的关联有助于我们更好的使用Canvas

11.分钟学会 Canvas 基础(二)

0. 前言 相信各位小伙伴读了之前的文章,对 Canvas 基础已经有了一定的认识和了解,但是大家也一定记得我在上一篇文章留了一个小的坑. 就是我没有告诉大家该如何去绘制圆,之所以没有说是因为绘制圆实际上是因为 CanvasRenderingContext2D 对象只提供了两个绘制矩形的方法,并没有直接提供绘制圆,椭圆等几何图形的方法.为了在 Canvas 上绘制更复杂的方法,必须在 Canvas 上启用路径,借用路径来绘制图形. 那么我们现在就一起来看一看,该如何使用路径来绘制圆等图形吧. -

Canvas基础认识

HTML5 Canvas 简单的说就是js+html5可以自定义绘制任何图形 认识Canvas元素 <canvas id="canvas" width="500" height="500"> <!-- 不支持canvas的浏览器,这里会显示~~ --> </canvas> 上面即是一个标准的Canvas的元素,暂时先当一个div去理解,只不过这个Canvas可以作图而已. 认识2D渲染上下文 通过js去访问,这

canvas 基础知识整理

canvas这个 HTML 元素是为了客户端矢量图形而设计的.它自己没有行为,但却把一个绘图 API 展现给客户端 JavaScript 以使脚本能够把想绘制的东西都绘制到一块画布上. html的基本结构 <!DOCTYPE html> <html lang="en"> <head> <meta charset=UTF-8> <title>Document</title> <style> #myCanv

canvas 基础

canvas是html5新设的元素对象,它的存在就相当于在浏览器窗口内给我们准备出canvas元素的区域的空白画布让我们随意填写,当然,画画的“笔”就是canvas给我们的接口啦.另外canvas是按照我们所设的代码规则按像素将图像画出的,相当于位图.<canvas>默认定义大小为300像素宽150像素高,一般会在canvas标签内设置canvas大小,例如,<canvas width="600" height="200"></canv