<style type="text/css">
#myc{
width: 500px;
height: 500px;
}
</style>
const canvas = document.querySelector("#myc");
canvas.style.border = '1px solid red';//此属性设置的是元素的样式;
const ctx = canvas.getContext("2d");
ctx.rect(100,50,100,100);
ctx.rect(左上角的 x 坐标,左上角的 y 坐标,宽度,高度);
ctx.stroke();
//描边矩形
![在这里插入图片描述](https://i-blog.csdnimg.cn/blog_migrate/778706cf84e38e278ca7d5958482901b.png#pic_center)
未知错误
对样式的方法进行改动
<style type="text/css">
/* #myc{
width: 500px;
height: 500px;
} */
</style>
<body>
<canvas width="500" height="500" id="myc"></canvas>
</body>
//描边矩形
var ctx = canvas.getContext("2d");
//ctx.rect(100,50,100,100);
//ctx.stroke();
//描边矩形
ctx.strokeRect(100,50,100,100);
效果同上;
//填充矩形,默认填充黑色
ctx.fillRect(50,100,50,50);
清除矩形
ctx.fillRect(50,100,100,100);
ctx.clearRect(50,100,50,50);//(x,y,w,h)效果见图
圆形
stroke描边
ctx.beginPath();
// 参数:圆心坐标x,y;半径r;起始角度、结束角度。是否逆时针(可选);
ctx.arc(100,75,50,0,2*Math.PI,true);
//圆心x,y,半径r,起始角度,结束角度,
ctx.stroke();
//向右平移再画一个圆;
ctx.beginPath();
ctx.arc(220,75,50,0,1*Math.PI,false);
//x,y,r,起始角度,结束角度,
ctx.stroke();
fill填充
ctx.beginPath();
//表示角度的方式;false表示顺时针,true为逆时针
ctx.arc(100,100,100,-20*Math.PI/180,0.5*Math.PI,false);
ctx.fillStyle = 'lightpink';
ctx.fill();
ctx.beginPath();
// 如果不是画一个正圆,必须要moveTo圆心点
ctx.moveTo(250,250);
ctx.arc(250,250,100,-20*Math.PI/180,0.5*Math.PI,false);
ctx.fillStyle = 'lightpink';
ctx.fill();
ctx.beginPath();
// 如果不是画一个正圆,必须要moveTo圆心点
ctx.moveTo(250,250);
ctx.arc(250,250,100,-20*Math.PI/180,0.5*Math.PI,false);
ctx.fillStyle = 'lightpink';
ctx.fill();
ctx.beginPath()
ctx.moveTo(250,250);
ctx.arc(250,250,100,0.5*Math.PI,230*Math.PI/180,false);
ctx.stroke();