html5的canvas 画西瓜

最新推荐文章于 2023-07-31 13:37:37 发布

Hello_my_new_world

最新推荐文章于 2023-07-31 13:37:37 发布

阅读量1k

点赞数

CC 4.0 BY-SA版权

分类专栏：日常练习--前端小效果文章标签： HTML5 canvas 扇形 JavaScript canvas画图

本文链接：https://blog.youkuaiyun.com/start_XUEBA/article/details/86648477

日常练习--前端小效果专栏收录该内容

19 篇文章

订阅专栏

本文介绍如何使用HTML5的Canvas API绘制一个逼真的西瓜图案，包括瓜肉、瓜皮和瓜子的细节处理。重点讲解了使用渐变色填充瓜肉与瓜皮之间的空白，以及通过旋转和弧线绘制瓜子的方法。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

这几天在学HTML5，练习canvas画了半个西瓜。

画的西瓜分为“瓜子”，“瓜肉”，“白瓜肉”，“瓜皮”。

效果图：

注意的地方是：

1.瓜肉与瓜皮之间有白色瓜肉，使用 stroke() 方法，但直接画上白色会显得死板，所以给 stroke() 设置样式为渐变色（红-白-绿）。

2.瓜子是一个扇形，画扇形需使用arc()方法创建弧/曲线，还需moveTo()方法把路径移动到画布中的指定点（即圆心）。

3.多个瓜子的创建需使用旋转——rotate()方法。具体请看 drawseeds(ctx,spin)函数。

HTML：

<canvas id="canv" width="800px" height="800px">
    你的浏览器不支持 canvas
</canvas>

JavaScript：

window.onload=function(){
	canvasdraw();//半圆
}
function canvasdraw(){
	var canvas=document.getElementById("canv");
	if(!canvas.getContext) return;//检测支持性
	var ctx=canvas.getContext('2d');//获得 2d 上下文对象
	//绘制图形
	
	//瓜子
	ctx.translate(150, 140); //一定坐标原点到原来的中心
    drawseeds(ctx,5);//大瓜子
    drawseeds(ctx,3);//小瓜子 	
	ctx.globalCompositeOperation="destination-over";//使瓜子不被瓜肉遮挡
	ctx.translate(-150, -140); //一定坐标原点到原来的中心
	
	//瓜肉
    ctx.beginPath();
    ctx.arc(150, 150,130, 0, Math.PI, false);
	ctx.fillStyle = "rgb(240,23,65)";
    ctx.fill();
	
	//瓜肉和皮之间
	// 创建渐变
	var grd=ctx.createRadialGradient(150,150,130,150,150,140);
	grd.addColorStop(0,"rgb(240,23,65)");
	grd.addColorStop(0.5,"rgb(250,230,250)");
	grd.addColorStop(1,"rgb(140,203,65)");
	// 填充渐变
	ctx.strokeStyle=grd;
	ctx.lineWidth = 20;//线宽
    ctx.stroke();
	
	//瓜皮
	ctx.beginPath();
	ctx.strokeStyle = "rgb(140,203,65)";
	ctx.arc(150,150,140,0,Math.PI);
	ctx.lineWidth = 10;//线宽
	ctx.stroke();
}

//瓜子
function drawseeds(ctx,spin){//spin:瓜子个数
	var pi = Math.PI;
	for (var i = 0; i <spin; i++){//绘制瓜子spin
        ctx.save();
        ctx.rotate(pi/(2*spin) + i * pi /spin);  //旋转坐标
        ctx.beginPath();
        ctx.moveTo(20*spin, 0);
		ctx.arc(20*spin, 0,4*spin,1/8*Math.PI,-1/8*Math.PI,true);
		ctx.fill();
        ctx.restore();
    }
}