canvas基础知识（二）画矩形、饼

最新推荐文章于 2023-11-14 14:15:55 发布

春风得意马蹄疾，一日看尽长安花。

最新推荐文章于 2023-11-14 14:15:55 发布

阅读量141

点赞数 1

分类专栏：绘图 canvas 文章标签： html5 css3

本文链接：https://blog.csdn.net/w96098/article/details/109816825

版权

绘图同时被 2 个专栏收录

5 篇文章 0 订阅

订阅专栏

canvas

4 篇文章 0 订阅

订阅专栏

<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();
	//描边矩形

未知错误

对样式的方法进行改动

<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();

在这里插入图片描述

canvas基础（一）划线

canvas基础知识（三）创建使用图片

春风得意马蹄疾，一日看尽长安花。

关注

1
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
canvas基础知识（二）画矩形、饼

<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
复制链接

扫一扫

专栏目录