Canvas 基础教程

<canvas> 是一个 HTML 元素,它同时也是一个画板,可以使用脚本 (通常为 JavaScript ) 来绘制图形

本篇教程描述了如何使用从一些基础开始,使用 <canvas> 元素来绘制 2D 图形

教程中提供的例子,可以让我们明白可以使用 canvas 做什么

Canvas 简单范例

<!DOCTYPE html>
<meta charset="utf-8"> 
<canvas id="canvas-2" width="200" height="100">
</canvas>

<script>
var c   = document.getElementById("canvas-2");
var ctx = c.getContext("2d");
ctx.fillStyle="#FF0000";
ctx.fillRect(0,0,150,75);
</script>

运行结果如下


是不是很简单

几行代码,就创建了一个 <canvas> 元素,并在上面绘制了一个 150x75 的红色的矩形

暂时不用去费劲理解每一行代码啥意思,后面我们会一一说明

Canvas 基础教程

关于   |   FAQ   |   我们的愿景   |   广告投放   |  博客

  简单教程,简单编程 - IT 入门首选站

Copyright © 2013-2018 简单教程 twle.cn All Rights Reserved.