当前位置 博文首页 > 编程我的一切：canvas画布基本知识点总结
<canvas width="600" height="400"> </canvas>
<body>
<!-- 准备画布 -->
<canvas width="600" height="400"></canvas>
<!-- 准备绘制工具 -->
<!-- 利用工具绘图 -->
<script>
// 获取元素
var myCanvas=document.querySelector('canvas');
// 获取上下文,绘制工具箱
var ctx=myCanvas.getContext('2d');
// 移动画笔
ctx.moveTo(100,100);
// 绘制直线（轨迹，绘制路径）
ctx.lineTo(200,100);
// 描边
ctx.stroke();
</script>
</body>
<body>
<canvas width="600" height="400"></canvas>
<script>
var myCanvas=document.querySelector("canvas");
var ctx=myCanvas.getContext("2d");
// 画平行线
// 蓝色 10px
ctx.moveTo(100,100);
ctx.lineTo(200,100);
ctx.strokeStyle="blue";
ctx.lineWidth=10;
ctx.stroke();
// 红色 20px
ctx.beginPath();//开辟新路径
ctx.moveTo(100,200);
ctx.lineTo(200,200);
ctx.strokeStyle="red";
ctx.lineWidth=20;
ctx.stroke();
// 绿色 30px
ctx.beginPath();//开辟新路径
ctx.moveTo(100,300);
ctx.lineTo(200,300);
ctx.strokeStyle="green";
ctx.lineWidth=30;
ctx.stroke();
</script>
</body>
<body>
<canvas width="600" height="400"></canvas>
<script>
var myCanvas = document.querySelector("canvas");
var ctx = myCanvas.getContext("2d");
// 绘制一个三角形
ctx.moveTo(100,100);
ctx.lineTo(200,100);
ctx.lineTo(200,200);
ctx.lineTo(100,100);
// 描边
ctx.stroke();
// 填充
ctx.fill();
</script>
</body>
<canvas width="600" height="400"></canvas>
<script>
var myCanvas = document.querySelector("canvas");
var ctx = myCanvas.getContext("2d");
// 绘制一个三角形
ctx.moveTo(100,100);
ctx.lineTo(200,100);
ctx.lineTo(200,200);
// 起始点和lineTo的结束点无法完全闭合，有缺角；
// ctx.lineTo(100,100);
// 使用canvas自动闭合
ctx.closePath();
ctx.lineWidth=10;
// 描边
ctx.stroke();
</script>
<script>
var myCanvas = document.querySelector("canvas");
var ctx = myCanvas.getContext("2d");
// 画线
ctx.moveTo(100.5, 100.5);
ctx.lineTo(300, 100.5);
ctx.setLineDash([5,10,15]);
ctx.stroke();
</script>
<body>
<canvas width="600" height="400"></canvas>
<script>
var myCanvas = document.querySelector("canvas");
var ctx = myCanvas.getContext("2d");
// 绘制一个矩形
// ctx.moveTo(100, 100);
// ctx.lineTo(255,100);
// ctx.lineWidth='30';
// // 颜色填充
// ctx.strokeStyle='#fff';
// // 从黑到白
// ctx.stroke();
// 线是由点构成的
ctx.lineWidth = '30';
//起始位置
// ctx.moveTo(100, 100);
for (var i = 0; i < 255; i++) {
//画255条1px长的线；
//每次开辟一条新路径，不然会样式覆盖
ctx.beginPath();
//起始位置
ctx.moveTo(100 + i - 1, 100);
//结束位置
ctx.lineTo(100 + i, 100);
ctx.strokeStyle = 'rgb(' + i + ',' + i + ',' + i + ')';
//描边
ctx.stroke();
}
</script>
</body>
<body>
<canvas width="600" height="400"></canvas>
<script>
var myCanvas = document.querySelector('canvas');
var ctx = myCanvas.getContext('2d');
//绘制点
//点的尺寸
//以坐标中心绘制点
//点坐标
var coordinate = {
x: 146,
y: 357
}
//点尺寸
var dottedSize = 6;
ctx.moveTo(coordinate.x - dottedSize / 2, coordinate.y - dottedSize / 2);
ctx.lineTo(coordinate.x + dottedSize / 2, coordinate.y - dottedSize / 2);
ctx.lineTo(coordinate.x + dottedSize / 2, coordinate.y + dottedSize / 2);
ctx.lineTo(coordinate.x - dottedSize / 2, coordinate.y + dottedSize / 2);
ctx.closePath();
ctx.fill();
</script>
</body>
<body>
<canvas width="600" height="400"></canvas>
<script>
var myCanvas = document.querySelector('canvas');
var ctx = myCanvas.getContext('2d');
//绘制圆弧
//1.确定圆心
//2.确定圆的半径
//3.确定起始位置和结束位置，确定圆弧长度和位置
//4.确定绘制方向（一般是默认的顺时针）direction
var w=ctx.canvas.width;
var h=ctx.canvas.height;
//在中心位置画一个半径150px的圆弧右下角（横坐标，纵坐标，半径，起始角度，结束角度）
ctx.arc(w/2,h/2,150,0,Math.PI/2);
ctx.stroke();
</script>
</body>
