HTML5 Canvas 技术探究

2019-08-02 · 大约 1300 个字 · 预计 7 分钟读完

概述

在前一篇《Canvas 基础图形3D框架 Zdog》中我们已经尝试了使用 Canvas 框架 Zdog 实现有趣的 3D 图形，而本篇我们来探究一下 Canvas 的使用和原理，还是先从这两个矩形开始吧。

Canvas绘制两个矩形

1
2
3
4
5
6
7
8
9
<canvas id="testcanvas" width="500" height="500"></canvas>
<script>
    var c = document.getElementById('testcanvas');
    var p = c.getContext("2d");
    p.fillStyle = "#FF0000";
    p.fillRect(0, 0, 300, 300);
    p.fillStyle = "rgba(0,0,255,0.5)";
    p.fillRect(200,200,500,500);
</script>