<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
<style type="text/css">
canvas {
border: 1px solid red;
}
</style>
</head>
<body>
<p>canvas不能通过css样式改变宽高,只能在标签内改变</p>
<canvas width="600" height="400"></canvas>
<script type="text/javascript">
/*
canvas绘图步骤
1.先落笔,站到落笔点的坐标
2.落笔,然后连线
3.描边
*/
//获取canves画布
var canvas =document.querySelector("canvas");
//获取绘图上下文,
var ctx=canvas.getContext("2d");
// 1.先落笔,画布的左上角为原点
ctx.moveTo(50, 50);
// 2.连线到某处
ctx.lineTo(300, 200);
// 3.描边
ctx.stroke();
// 开启新图层,防止两条线的干扰
ctx.beginPath();
//带颜色的横线
// 1.落笔
ctx.moveTo(100, 150);
// 2.连线
ctx.lineTo(300, 150);
// 3.设置属性
ctx.strokeStyle="blue"; //红色的线
ctx.lineWidth="20"; //设置线宽
// 4.描边
ctx.stroke();
</script>
</body>
</html>
【原生javascript】canvas画布
最新推荐文章于 2024-07-12 15:10:34 发布