一、绘制矩形
fillRect(x,y,width,height) 填充矩形
fillStyle = "rbg(x,x,x)" 填充矩形颜色
strokeRect(x,y.width,height) 绘制矩形边框
strokeRect = "rgb(x,x,x)" 绘制矩形边框颜色
clearRect(x,y,width,height) 清除矩形区域
使用案例:
<html lang="en"><head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Documenttitle>head><body> <canvas id="canvas" width="500px" height="500px">canvas>body><script> const canvas = document.querySelector("#canvas"); const ctx = canvas.getContext("2d"); //填充矩形 ctx.fillStyle = "rgb(100,0,50)"; ctx.fillRect(0,0,200,100); //绘制矩形边框 ctx.strokeStyle = "rgb(0,150,210)"; ctx.strokeRect(100,100,200,100); //清除矩形区域 ctx.clearRect(20,20,50,50);script>html>
二、绘制路径
beginPath() 创建路径
moveTo(x, y) 起始坐标点
lineTo(x,y) 绘制坐标点
closePath() 闭合路径
stroke() 绘制边线
fill() 填充图形
使用案例:
<html lang="en"><head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Documenttitle>head><body> <canvas id="canvas" width="500px" height="500px">canvas>body><script> const canvas = document.querySelector("#canvas"); const ctx = canvas.getContext("2d"); ctx.beginPath(); ctx.moveTo(100,50); ctx.lineTo(150,100); ctx.lineTo(100,150); ctx.closePath(); ctx.stroke(); // ctx.fill();script>html>
三、绘制圆弧
1、arc(x, y, r, start, end, direction) x,y是圆心坐标;r是半径;start,end是开始和结束弧度;direction是布尔值 顺时针(false)或逆时针(true)。
radians=(Math.PI/180)*angle //角度转换成弧度
案例使用:
<html lang="en"><head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Documenttitle>head><body> <canvas id="canvas" width="500px" height="500px">canvas>body><script> const canvas = document.querySelector("#canvas"); const ctx = canvas.getContext("2d"); ctx.beginPath(); ctx.arc(100,100,50,0,Math.PI,true); // ctx.closePath(); //闭合 ctx.stroke();script>