一、绘制矩形
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>
最低0.47元/天 解锁文章
509
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
