HTML5-canvas

最新推荐文章于 2023-05-07 20:10:48 发布

Marx_W

最新推荐文章于 2023-05-07 20:10:48 发布

阅读量274

点赞数

分类专栏： # HTML5

本文链接：https://blog.csdn.net/sinat_38052999/article/details/70198734

版权

HTML5 专栏收录该内容

2 篇文章 0 订阅

订阅专栏

canvas :
标签定义图形，比如图表和其他图像，您必须使用脚本来绘制图形。
在画布上（Canvas）画一个红色矩形，渐变矩形，彩色矩形，和一些彩色的文字。

创建canvas：

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Creat canvas</title>
</head>
<body>
<canvas id="mycanvas" width="200" height="100" style="border: 3px solid #000000">  
</canvas>
</body>
</html>

结果：
这里写图片描述

这里只是单纯的一个画布，要想在里面绘制图形，需要使用脚本

<!DOCTYPE html>
<html>
<head>
<title> canvas </title>
</head>
<body>
<canvas id="mycanvas" width="200" height="100" style="border: 1px solid #000000">
</canvas>
<script >
var cx=document.getElementById('mycanvas');
var cts=cx.getContext("2d");
cts.fillStyle="#000000";
cts.fillRect(0,0,150,75);    
</script>
</body>
</html>

canvas实际上是一个二维网格，其中cts.fillRect(0,0,150,75)是从(0,0)到（150，75）的一个矩形区域
结果：
这里写图片描述

在canvas画布上画一条线路：

<!doctype html>
<html>
<head>
<title>Welcome canvas</title>
</head>
<body>
<canvas id="canvas" width="200" height="100" style="border: 5px solid #000000"></canvas>
<script>
var c=document.getElementById('canvas');
var ctx=c.getContext("2d");
ctx.moveTo(0,0);
ctx.lineTo(200,100);
ctx.stroke();
</script>
</body>
</html>

结果：
这里写图片描述

在canvas画布上绘制一个圆:

<!doctype html>
<html>
<head>
<title>Welcome canvas</title>
</head>
<body>
<canvas id="canvas" width="200" height="100" style="border: 5px solid #000000"></canvas>
<script>
var c=document.getElementById('canvas');
var ctx=c.getContext("2d");
ctx.beginPath();
ctx.arc(100,50,30,0,2*Math.PI);     //第一个数字和第二个数字为圆心所在的位置，第三个数字为半径，第四个和第五个数字分别是开始和结束位置
ctx.stroke();
</script>
</body>
</html>

结果：
这里写图片描述

在canvas画布中添加文本文字:

<!doctype html>
<html>
<head>
<title>Welcome canvas</title>
</head>
<body>
<canvas id="canvas" width="200" height="100" style="border: 5px solid #000000"></canvas>
<script>
var c=document.getElementById('canvas');
var ctx=c.getContext("2d");
ctx.font="30px Arial";    //30px位文本文字的大小，Arial表示的是文本的字体
ctx.fillText("hello html1",0,50);    //双引号内为文本内容，第一个数字为文   本最左边内容的位置即文本的开始位置，第二个数字为文本内容下边缘的位置
ctx.strokeText("hello html2",50,100);  //fillText为实心字体，strokeText为空心字体
</script>
</body>
</html>

结果：
这里写图片描述

canvas-渐变：

<!doctype html>
<html>
<head>
<title>Welcome canvas</title>
</head>
<body>
<canvas id="canvas" width="200" height="100" style="border: 5px solid #000000"></canvas>
<script>
var c=document.getElementById('canvas');
var ctx=c.getContext("2d");
var grd=ctx.createLinearGradient(0,0,200,0);
grd.addColorStop(0,"yellow");    //0->开始的颜色
grd.addColorStop(1,"pink");      //1->渐变的颜色
ctx.fillStyle=grd;
ctx.fillRect(10,20,150,60);     //第一个和第二个数字分别为渐变区域左边界以及上边界离画布左、上边界的距离，第三个和第四个数字分别为渐变区域的长度和宽度
</script>
</body>
</html>