Canvas PPT for Marp

HTML5
canvas

===

Created by @PaulHan

绘制模式

  • canvas 立即模式,直接绘制
  • SVG 保留模式,图形对象

常用的色值

  • RGBA
1
rgba(255, 255, 255, 0)
  • H(色相)S(饱和度)L(亮度)

    1
    hsl(360, 50%, 50%)


路径与子路径

与路径相关的函数
arc beginPath closePath rect moveTo lineTo...

See the Pen subpath by PaulHan (@hanzhangyu) on CodePen.


像素边界

线条模糊


非零环绕规则

正负相抵,非零即为包含
isPointInPath也支持非零环绕规则

See the Pen isPointInPath by PaulHan (@hanzhangyu) on CodePen.


基本变换

1
2
3
4
5
6
7
8
9
10
11
transform(a,b,c,d,e,f);
x` = ax+cy+e;
y` = bx+dy+f;

1, 0, 0, 1, 0, 0
水平缩放,水平倾斜,垂直倾斜,垂直缩放,水平移动,垂直移动
这里的水平指的就是2D的XY轴

rotate(angle)
x` = cos(angle)*x - sin(angle)*y
y` = sin(angle)*x + cos(angle)*y

TIPS: 为了坐标变换的方便可以移动坐标轴

clip与变换一样是叠加的


clip

See the Pen clip by PaulHan (@hanzhangyu) on CodePen.


设备像素与css像素,注意使用场景

imgdata 为设备像素


离屏canvas

PS: 浏览器的双缓冲


像素处理

负片255-x 黑白均值 浮雕边缘检测


基于时间轴的同步动画

requestAnimationFrame不确定性

确认时间:帧时间差/1000

PS: 时间轴扭曲


碰撞检测

碰撞检测(简单图形,分离轴与最小平移向量)

点积x1 * x2 + y1 * y2 = |a||b| cos<a,b>

碰撞反弹向量2(V·L)/(L·L)L-V, 碰撞恢复2*MTV


Thanks For Watching! :+1:

Copyright © 2018 Paul Han

Author: PaulHan
Link: https://www.paulhan.com/blog/2018/04/12/canvas_ppt_marp/
Copyright Notice: All articles in this blog are licensed under CC BY-NC-SA 4.0 unless stating additionally.