我用canvas画了一个茶杯

Posted 2022-09-14 周杰伦本人

我用canvas画了一个茶杯

三点了，该喝茶了，有的同学连个茶杯都没有，我今天用canvas给大家画一个茶杯，废话不多说，上代码

这里做一个简单的讲解，当然代码也非常的简单，

canvas是h5的新特性，但这个标签对低版本的浏览器是不兼容的，canvas是行内元素，如果想让canvas进行居中的话，需要让display属性设置为block，这里没有设置，就不多说了。

首先 我们在html页面定义canvas标签，设置好宽度和高度，这就是我们的画布

<canvas id="tea" width="1000" height="500"></canvas>

第二步就是画茶杯了

茶杯的构造很简单 三个部分，茶杯杯体，茶杯把手，冒的热气，我们分别从这个三个部分进行讲解一下，

画图的一般步骤是要先获取到我们定义的画布，然后获取它的上下文，接下来就是调用各种api来作图了，包括着色一类的。

let canvasDemo = document.getElementById(tea);
let ctxJay = canvasDemo.getContext(2d);

茶杯杯体

首先是茶杯的杯体，杯体非常简单，画一个矩形就可以了,为了好看，我们用颜色填充一下：

ctxJay.lineWidth =5;
    ctxJay.fillStyle=blue;
    ctxJay.fillRect(
            100,200,200,200
        );

    ctxJay.strokeRect(100,200,200,200);

其中strokeRect()方法就是绘制矩形的方法，lineWidth是我们定义的矩形边框的宽度是多少，fillRect()就是填充的矩形的大小，代码比较简答

添加图片：

let img = new Image();
    img.src = https://xiepanpan123.oss-cn-beijing.aliyuncs.com/图片1.png;
    img.onload = () => 
        ctxJay.drawImage(img,120, 220, 160, 160);
    
    ctxJay.stroke();

drawImage()就是描绘照片的方法

茶杯把手

把手我们看到其实就是一个半圆，由于这个功能中使用画圆的模块比较多，因此我们提取成一个公共的方法：

function drawCircle(x,y,r,width,flag) 
        ctxJay.beginPath();
        ctxJay.arc(x,y,r, -Math.PI/2,Math.PI/2,flag);
        ctxJay.lineWidth = width;
        ctxJay.strokeStyle=red;
        ctxJay.stroke();
    

这里arc()方法就是用来画圆的方法，它的参数有六个，分别是圆的中心的x坐标，圆的中心的y坐标，半径，起始角度，结束角度，最后一项是按顺时针来画还是按照逆时针来画，False是顺时针，true 是逆时针

我们画把手的时候直接画这个就完事了

冒的热气

我们看一下这个热气构造，是使用圆弧来构成的，这时候，我们只要确定好圆心的位置，重复调用drawCircle()方法就可以了。

for (let i = 0; i < 4; i++) 
        drawCircle(120+i*40,120,20,1,true);
        drawCircle(120 +i*40,160,20,1,false);
    

总结

这篇文章主要讲了怎么使用canvas来画一个茶杯，主要用了canvas的画矩形strokeRect()和画圆的方法arc()，还是比较简单的，你也来试试吧！