HTML5画布绘制实心圆、三角形、五边形、五角星

场景

纯原生canvas绘制,可以自定义位置、颜色等信息。
实现

以下封装成方法,调用后传参即可。图形两角间边距暂时写死,可以自行加减参数来调整。

1.实心圆

function circular(x, y, radius, fillColor, strokeColor){

ctx.beginPath();//开始绘制

ctx.arc(x, y, radius, 0, 2 * Math.PI); //arc 的意思是"弧"

ctx.fillStyle = fillColor; //设置填充颜色

ctx.fill(); //开始填充

ctx.strokeStyle = strokeColor; //将线条颜色设置为蓝色

ctx.setLineDash([]);

ctx.stroke(); //stroke() 方法默认颜色是黑色(如果没有上面一行,则会是黑色)。

}

2.三角形

function triangle(x, y, fillColor){

ctx.beginPath();

ctx.moveTo(x, y); //上顶点

ctx.lineTo(x - 23, y + 22); //左顶点

ctx.lineTo(x + 8, y + 15); //右顶点

ctx.stroke();

ctx.fillStyle = fillColor;

ctx.fill();

}

3.五边形

function pentagon(x, y, fillColor){

ctx.beginPath();

ctx.moveTo(x, y); //顶点

ctx.lineTo(x - 15, y + 10); //最左

ctx.lineTo(x - 8, y + 25); //左下

ctx.lineTo(x + 8, y + 25); //右下

ctx.lineTo(x + 15, y + 10); //最右

ctx.closePath();

ctx.fillStyle = fillColor;

ctx.fill();

}

4.五角星

function pointedStar(x, y, angle){

ctx.beginPath();

ctx.rotate(angle*Math.PI/180); //旋转角度 输入number

ctx.moveTo(x, y);

ctx.lineTo(x + 10, y + 30);

ctx.lineTo(x - 15, y + 11);

ctx.lineTo(x + 15, y + 11);

ctx.lineTo(x - 10, y + 30);

ctx.closePath();

ctx.fillStyle = 'black';

ctx.strokeStyle = "rgb(250, 252, 211)";

ctx.stroke();

ctx.fill();

ctx.restore();

}

相关推荐
一斤代码1 小时前
vue3 下载图片(标签内容可转图)
前端·javascript·vue
中微子1 小时前
React Router 源码深度剖析解决面试中的深层次问题
前端·react.js
光影少年1 小时前
从前端转go开发的学习路线
前端·学习·golang
中微子2 小时前
React Router 面试指南:从基础到实战
前端·react.js·前端框架
3Katrina2 小时前
深入理解 useLayoutEffect:解决 UI "闪烁"问题的利器
前端·javascript·面试
前端_学习之路3 小时前
React--Fiber 架构
前端·react.js·架构
伍哥的传说3 小时前
React 实现五子棋人机对战小游戏
前端·javascript·react.js·前端框架·node.js·ecmascript·js
qq_424409193 小时前
uniapp的app项目,某个页面长时间无操作,返回首页
前端·vue.js·uni-app
我在北京coding3 小时前
element el-table渲染二维对象数组
前端·javascript·vue.js
布兰妮甜3 小时前
Vue+ElementUI聊天室开发指南
前端·javascript·vue.js·elementui