什么是canvas?
canvas(画布) 是可以使用Javascript来绘制图形的html元素. 基本的语法结构：
<canvas id=""
width="宽度像素个数"
height="高度像素个数">
</canvas> canvas的应用场景
-
网页特效.
-
网页游戏.
-
数据可视化图表.
canvas基础图形图像的绘制
canvas的基本使用步骤：
let cvs = document.getElementById('canvas')
// 获取用于绘制图形的 Context 对象
let ctx = cvs.getContext('2d')
ctx.xxxxxxxx() contextType 上下文类型
'
2d' 将会返回CanvasRenderingContext2D对象,用于渲染二维图形'
webgl' 将会返回WebGLRenderingContext对象,用于渲染三维图形
CanvasRenderingContext2D：
绘制填充：
ctx.fillStyle = 'red' // 设置填充样式 颜色
ctx.fillRect(x, y, width, height) // 填充一个矩形绘制描边：
ctx.strokeStyle = 'red' // 设置描边样式 颜色
ctx.strokeRect(x, y, width, height) // 对一个矩形描边绘制文本：
ctx.font = '25px 微软雅黑'
// 填充文本
ctx.fillText(text, x, y) // (文本内容, 坐标x, 坐标y)
//描边文本
ctx.strokeText(text, x, y)示例：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta http-equiv="X-UA-Compatible" content="IE=edge" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>Document</title>
<style>
canvas {
background-color: antiquewhite;
border: 1px solid rgb(233, 198, 3);
}
</style>
</head>
<body>
<canvas id="canvas" width="640px" height="360px"></canvas>
<script>
let cvs = document.getElementById("canvas");
let ctx = cvs.getContext("2d");
//填充矩形
ctx.fillStyle = "pink";
ctx.fillRect(30, 30, 100, 150);
//绘制描边
ctx.strokeStyle = "blue";
ctx.strokeRect(15, 15, 130, 180);
//绘制文本
ctx.font = "25px Helvetica";
ctx.fillText("嘿嘿哈嘿 嘿嘿", 300, 100);
ctx.strokeText("嘿嘿哈嘿 嘿嘿~~~", 330, 130);
</script>
</body>
</html>
329
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
