canvas学习

最新推荐文章于 2025-05-13 11:08:01 发布

置顶 csdn_haow

最新推荐文章于 2025-05-13 11:08:01 发布

阅读量190

点赞数 2

CC 4.0 BY-SA版权

分类专栏： Web前端文章标签： canvas javaScript

本文链接：https://blog.youkuaiyun.com/csdn_haow/article/details/99409221

Web前端专栏收录该内容

29 篇文章

订阅专栏

开始

canvas介绍

<canvas>是HTML5新增的元素，兼容性：IE9+、Firefox 1.5+、Safari 2+、Opera 9+、Chrome、iOS 版 Safari 以及 Android 版 WebKit 都在某种程度上支持<canvas>。canvas除了具备基本绘图能力的 2D 上下文，<canvas>还有一个 WebGL 的 3D 上下文。

学习

2d上下文

首先，需要在html里指定一个canvas标签，指定标签的宽高，如：

<!DOCTYPE html>
<html>
<head>
  <meta charset="utf-8">
  <title>canvas学习</title>
</head>
<body>
  <canvas id="draw" width="400" height="400" ></canvas>
</body>
</html>

然后，我们获取canvas元素，并获取canvas元素的2d上下文：

var drawing = document.getElementById("draw"); //获取canvas元素
var context = drawing.getContext("2d"); //获取2d上下文

接下来，我们就可以用canvas的2d上下文的api来绘制矩形：

context.strokeStyle = "red";  //填充颜色
context.fillStyle = "#0000ff"; //描边颜色
context.fillRect(10, 10, 50, 50) //绘制矩形
context.strokeRect(100, 100, 50, 50); //描边矩形

context.fillStyle = "#ff0000"; //描边颜色
context.fillRect(30, 30, 50, 50); //绘制矩形
context.clearRect(40, 40, 10, 10);  //绘制空白矩形

绘制的效果如图：

接下来，我们使用canvas提供的2d上下文api来绘制路径，绘制路径比绘制矩形要稍微复杂一点，主要思路就是我绘制一条一条的路径，但是在绘制的时候不连线，只有最后在调用stroke方法的时候才会连线：

context.beginPath() //绘制路径，只画线，stroke的时候绘制。
context.arc(100, 100, 99, 0, 2 * Math.PI, false); //绘制圆

context.moveTo(194, 100)//移动点，不绘制，防止绘制多余线条。
context.arc(100, 100, 94, 0, 2 * Math.PI, false) //绘制圆

context.translate(100, 100) //改变坐标原点
context.rotate(1); //先旋转再 绘制，旋转之前绘制的都无效。
context.moveTo(0, 0) //移动点，不绘制
context.lineTo(0, 15) //从上一点绘制到该点

context.moveTo(0, 0) // 移动点，不绘制
context.lineTo(35, 0) //从上一点绘制到该点

context.stroke() //开始绘制