抹桥的博客

Seize the day.


  • 首页

  • 归档

  • 分类

  • 标签

  • 搜索

Canvas 基础

发表于 2015-10-19 更新于 2019-06-04 分类于 技术 阅读次数: Disqus:

首先引用 MDN 上对于 canvas 的定义:

<canvas> 是 HTML5 新增的元素,可使用JavaScript脚本来绘制图形。例如:画图,合成照片,创建动画甚至实时视频处理与渲染。

也就是说这是浏览器提供给我们的一个画布和丰富的接口,可以用来制作各种复杂的效果。
<canvas> 元素创造了一个固定大小的画布,它公开了一个或多个渲染上下文。其可以用来绘制和处理被现实的页面。
Canvas坐标
这是 canvas 2d 的坐标,可以看到左上角为原点,横轴为x轴,纵轴为y轴。我们所有的canvas2d的功能实现都是在这个坐标系中。

基本用法

本文只简单介绍一下矩形、线段和圆弧的画法。

矩形

通过一个简单的例子来了解一下基本的API:

HTML:

<canvas id="canvas" style="height:100%">
当前浏览器不支持Canvas,请更换浏览器后再试
</canvas>

JavaScript:

var canvas = document.getElementById('canvas');
var ctx = canvas.getContext('2d');
var WINDOW_WIDTH = window.screen.availWidth;
var WINDOW_HEIGHT = window.screen.availHeight;
ctx.clearRect(0, 0, WINDOW_WIDTH, WINDOW_HEIGHT)
ctx.beginPath();
ctx.fillStyle = '#000';
ctx.fillRect(10, 10, 55, 50);
ctx.fillStyle = 'rgba(0,0,200,0.5)'
ctx.fillRect(30, 30, 55, 50);

页面上会如下显示:

首先获取到 canvas 元素,并通过 getContext(‘2d’) 获取到它的渲染上下文。

clearRect(x, y, width, height)

清空指定区域,如果需要做动画的话,每次重新渲染前都需要调用这个函数来清除前一帧的内容。

beginPath()

新建一条路径

fillStyle

用来设置要填充的颜色

ctx.fillRect(10, 10, 55, 50);

以x轴等于10,y轴等于10为起点,绘制一个宽55高50的矩形。

strokeRect(x,y,width,height)

跟fillRect不同的地方在于,strokeRect会绘制一个矩形的边框,如下:

线段

绘制一个三角形

ctx.beginPath();
ctx.moveTo(75, 50);
ctx.lineTo(100, 75);
ctx.lineTo(100, 25);
ctx.closePath();
ctx.stroke();

moveTo(x,y)

定义一个起点,从这个点开始绘制

lineTo(x,y)

绘制一条从当前位置到指定x以及y位置的直线

closePath()

闭合当前路径,也可以用lineTo到起点来代替

storke()

根据已有路径的来绘制线段,也就是说如果不执行stroke(),那么画布上什么都没有。

圆弧

arc(x, y, radius, startAngle, endAngle, anticlockwise)

该方法有五个参数: x,y为绘制圆弧所在圆上的圆心坐标。radius为半径。startAngle以及endAngle参数用弧度定义了开始以及结束的弧度。这些都是以x轴为基准。参数anticlockwise 为一个布尔值。为true时,是逆时针方向,否则顺时针方向。
看个直观的例子:

ctx.beginPath();
truectx.arc(75, 75, 50, 0, Math.PI * 2, true);
truectx.moveTo(110, 75);
truectx.arc(75, 75, 35, 0, Math.PI, false);
truectx.moveTo(65, 65);
truectx.arc(60, 65, 5, 0, Math.PI * 2, true);
truectx.moveTo(95, 65);
truectx.arc(90, 65, 5, 0, Math.PI * 2, true);
truectx.stroke();
truectx.clearRect(0, 0, 500, 500);
truefor (var i = 0; i < 4; i++) {
truetruefor (var j = 0; j < 3; j++) {
truetruetruectx.beginPath();
truetruetruevar x = 20 + j * 40;
truetruetruevar y = 20 + i * 40;
truetruetruevar radisu = 20;
truetruetruevar startAngle = 0;
truetruetruevar endAngle = Math.PI + (Math.PI * j) / 2;
truetruetruevar anticlockwise = i % 2 == 0 ? true : false;
truetruetruectx.arc(x, y, radisu, startAngle, endAngle, anticlockwise);
truetruetrueif (i > 1) {
truetruetruetruectx.fill();
truetruetrue} else {
truetruetruetruectx.stroke();
truetruetrue}
truetrue}
true}


通过这个例子可以看清楚的看到 fill 和 stroke 这个两个函数的区别,前者渲染边框,后者填充整个指定区域。同时可以区分,anticlockwise 分别 true 和 false 时渲染的机制,前者为逆时针,后者为顺时针。

# 总结
仅仅通过这三个基础的用法,就可以制作出很多漂亮的动画了。我这里做了一个简单运动的小球,同时做了边界判定。

参考文章: MDN-Canvas

如果觉得此文章对你有帮助,可以请我喝咖啡O(∩_∩)O
抹桥 微信支付

微信支付

抹桥 支付宝

支付宝

  • 本文作者: 抹桥
  • 本文链接: https://blog.kisnows.com/2015/10/19/first-contact-of-canvas/
  • 版权声明: 本博客所有文章除特别声明外,均采用 BY-NC-ND 许可协议。转载请注明出处!
# canvas
轻量级fullPage整屏滚动框架V1.3发布
基于 Express+Gulp+BrowserSync 搭建高性能的前端开发环境
  • 文章目录
  • 站点概览
抹桥

抹桥

怕什么真理无穷
67 日志
2 分类
54 标签
RSS
GitHub E-Mail Twitter Weibo
Creative Commons
  1. 1. 基本用法
    1. 1.1. 矩形
      1. 1.1.1. HTML:
      2. 1.1.2. JavaScript:
      3. 1.1.3. clearRect(x, y, width, height)
      4. 1.1.4. beginPath()
      5. 1.1.5. fillStyle
      6. 1.1.6. ctx.fillRect(10, 10, 55, 50);
      7. 1.1.7. strokeRect(x,y,width,height)
    2. 1.2. 线段
      1. 1.2.1. moveTo(x,y)
      2. 1.2.2. lineTo(x,y)
      3. 1.2.3. closePath()
      4. 1.2.4. storke()
    3. 1.3. 圆弧
      1. 1.3.1. arc(x, y, radius, startAngle, endAngle, anticlockwise)
© 2015 – 2019 抹桥
由 Hexo 强力驱动 v3.9.0
|
主题 – NexT.Gemini v7.3.0