Canvas讲解

提示：扫一扫查出行
【扫一扫了解最新限行尾号】
复制提示

1.Canvas是什么？

简单地说canvas是画布，可以进行画任何的线、图形、填充等一系列的操作，而且操作的画图就是js，

提供简单的二维矢量绘图.

2.步骤：

<canvas id="aa">12</canvas> //创建HTML页面，设置画布标签
var canvas=document.getElementById("aa");//编写js，获取画布dom对象
var ctx=canvas.getContext("2d"); //通过Canvas标签的Dom对象获取上下文
ctx.fillStyle="green"; //设置绘制线样式、颜色
ctx.fillRect(10,10,100,100); //绘制矩形，或者填充矩形

3.代码：

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>我的网页</title>
</head>
<body>
<h1>我的网页</h1>
<hr>
<canvas id="aa">12</canvas>
<script>
var canvas=document.getElementById("aa");
var ctx=canvas.getContext("2d");
ctx.fillStyle="green";
ctx.fillRect(0,0,100,100);
ctx.strokeRect(120, 0, 100, 100);
// 设置带透明度的样式
ctx.fillStyle = "rgba(0,255,0,0.5)";
ctx.strokeStyle = "rgba(255,0,255,0.5)";
ctx.fillRect(240,0 , 100, 100);
ctx.strokeRect(240, 120, 100, 100);
</script>
</body>
</html>