demo.html：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<style>
canvas {
border: 1px solid red;
}
</style>
</head>
<body>
<!-- canvas是一个用来展示绘图效果的标签，它和img类似，都是行内块元素 -->
<!-- 同一个页面可以拥有多个canvas标签 -->
<!-- 画布默认300*150，要设置画布的宽高，需要借助canvas元素的属性(不要在CSS中设置宽高) -->
<canvas id="cvs" width="500" height="500"></canvas>
<script>
var cvs = document.getElementById('cvs');
/*
* 上面的canvas只是用来展示绘图效果的，
* 那么这个图从哪里来的呢？
* 需要打开canvas（通过getContext方法来打开），然后在上面绘图图形，
* 最终就可以通过canvas标签看到。
* */
var ctx = cvs.getContext('2d');
/*
* canvas绘图的几个步骤：
* 1、先移动钢笔到指定的位置
* 2、开始画线条
* 3、描边路径
* */
// 1、先移动钢笔到指定的位置
// ctx.moveTo( x轴移动的坐标，y轴移动的坐标 )
ctx.moveTo( 10, 10 );
// 2、开始画线条
// ctx.lineTo( x轴移动的坐标，y轴移动的坐标 )
ctx.lineTo( 110, 10 ); //如果没有moveTo,第一个lineTo就相当于moveTo (当前路径下的第一个)
ctx.lineTo( 110, 110 );
ctx.lineTo( 10, 110 );
ctx.lineTo( 10, 10 );
// 3、描边路径
ctx.stroke(); //描边
//ctx.fill(); //填充
</script>
</body>
</html>
1286
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
