Uni-App 画布 Canvas 用法小练之画个五角星

先上效果图如下：

计算方式：根据矩形宽度，计算出矩形高度、五角星中心点到远顶点的距离、五角星各个顶点的坐标等，图示如下：

代码如下：

<template><view><canvas style="width: 300px; height: 300px;" canvas-id="myCanvas" id="myCanvas"></canvas></view>
</template><script>export default {onReady: function(e) {var context = uni.createCanvasContext('myCanvas');//矩形宽度var recW = 300;//18度角var angle18 = Math.PI / 10;//36度角var angle36 = Math.PI / 5;//18度角对应的sin值（三角函数）var sin18 = Math.sin(angle18);//36度角对应的sin值（三角函数）var sin36 = Math.sin(angle36);//18度角对应的cos值（三角函数）var cos18 = Math.cos(angle18);//36度角对应的cos值（三角函数）var cos36 = Math.cos(angle36);//根据矩形宽度计算出矩形高度                             var recH = (recW * (1 + cos36)) / (2 * cos18);//图中OA两点之间的距离var oa = recW / (2 * cos18);//五角星相邻两个顶点之间的距离，以AA_为例var aa_ = recW / (2 * (1 + sin18));//图中五角星各顶点坐标（A/B/C/D/E/A_/B_/C_/D_/E_）（x:x坐标，y：y坐标）var pointA = {x: recW / 2,y: 0};var pointB = {x: recW,y: oa * (1 - sin18)};var pointC = {x: (recW / 2) + oa * sin36,y: recH};var pointD = {x: (recW / 2) - oa * sin36,y: recH};var pointE = {x: 0,y: oa * (1 - sin18)};var pointA_ = {x: aa_ * (1 + 2 * sin18),y: aa_ * cos18};var pointB_ = {x: recW - aa_ * cos36,y: aa_ * cos18 + aa_ * sin36};var pointC_ = {x: (recW - aa_) * cos36,y: recH - aa_ * sin36};var pointD_ = {x: aa_ * Math.cos(angle36),y: aa_ * cos18 + aa_ * sin36};var pointE_ = {x: aa_,y: aa_ * cos18};var pointO = {x: recW / 2,y: oa};//设置画笔颜色context.setStrokeStyle('red');context.setFillStyle('red');//设置画笔宽度context.setLineWidth(2);//绘制红色矩形背景context.fillRect(0, 0, recW, recH);//绘制五个黄色三角形context.beginPath();context.moveTo(pointO.x, pointO.y);context.lineTo(pointA.x, pointA.y);context.lineTo(pointA_.x, pointA_.y);context.moveTo(pointO.x, pointO.y);context.lineTo(pointB.x, pointB.y);context.lineTo(pointB_.x, pointB_.y);context.moveTo(pointO.x, pointO.y);context.lineTo(pointC.x, pointC.y);context.lineTo(pointC_.x, pointC_.y);context.moveTo(pointO.x, pointO.y);context.lineTo(pointD.x, pointD.y);context.lineTo(pointD_.x, pointD_.y);context.moveTo(pointO.x, pointO.y);context.lineTo(pointE.x, pointE.y);context.lineTo(pointE_.x, pointE_.y);context.setFillStyle('yellow');context.fill();//绘制五个绿色三角形context.beginPath();context.moveTo(pointO.x, pointO.y);context.lineTo(pointA_.x, pointA_.y);context.lineTo(pointB.x, pointB.y);context.moveTo(pointO.x, pointO.y);context.lineTo(pointB_.x, pointB_.y);context.lineTo(pointC.x, pointC.y);context.moveTo(pointO.x, pointO.y);context.lineTo(pointC_.x, pointC_.y);context.lineTo(pointD.x, pointD.y);context.moveTo(pointO.x, pointO.y);context.lineTo(pointD_.x, pointD_.y);context.lineTo(pointE.x, pointE.y);context.moveTo(pointO.x, pointO.y);context.lineTo(pointE_.x, pointE_.y);context.lineTo(pointA.x, pointA.y);context.setFillStyle('green');context.fill();//将之前在绘图上下文中的描述画到canvas中context.draw();}}
</script><style>
</style>

Uni-App 画布 Canvas 用法小练之画个五角星相关推荐

uni.canvasToTempFilePath在app正常，微信小程序报错: fail canvas is empty
问题描述: 在微信小程序使用uni.canvasToTempFilePath,画布可以画出图像,但是生成图片临时路径报错:fail canvas is empty . 问题分析: uni.canvas ...
小练手：用Canvas绘制谢尔宾斯基三角形
转载<小练手:用Canvas绘制谢尔宾斯基三角形> 补充作者第二种画法的完整程序: PS:修改function SierpinskiTriangle(p,len,depth = 9)中d ...
uni app 开发微信小程序及上线体验
uni app 开发微信小程序及上线体验项目创建及微信小程序AppId的申请本次开发的是电商类的微信小程序,这里用到的是HBuilderX这个编辑器.之前用的Visual Studio Code ...
未来技术 html5 app,未来web浏览技术提前体验：10个会让你惊叹不已的HTML5画布(canvas)技术应用演示...
随着老式浏览器(IE6,IE8)的逐渐淘汰,现代浏览器(火狐浏览器,谷歌浏览器,Opera,Safari)走向主流,越来越多的HTML5和CSS3技术开始出现在各种网站上.这些最新的网页技术究竟能给我 ...
使用canvas绘制小程序码
场景:使用小程序文档的API可以获取带参数的二维码和小程序码,但是小程序码中的图片默认都是小程序的头像(红框中的图片).现在我们需要替换里面的图片,然后将小程序码保存成一张图片存入相册. 1.获取带参 ...
刮刮乐html5效果擦除,利用HTML5的画布Canvas实现刮刮卡效果
先给大家展示效果: 你玩过刮刮卡么?一不小心可以中奖的那种.今天我给大家分享一个基于HTML5技术实现的刮刮卡效果,在PC上只需按住鼠标,在手机上你只需按住指头,轻轻刮去图层就可以模拟真实的刮奖效果. ...
tkinter笔记：画布canvas
1 整体框架 import tkinter as tkwindow = tk.Tk() #创建窗口window.title('my window') #窗口标题window.geometry('500 ...
切换 uniapp_万能前端框架uni app初探03：底部导航开发
前言本节我们使用uni app的底部导航功能,点击不同tab会显示不同页面,这个功能在实际项目开发中几乎是必备的. 一.基础知识 1.tabBar 如果应用是一个多 tab 应用,可以通过 tabB ...
html5画板功能,JS实现canvas简单小画板功能
本文实例为大家分享了JS实现canvas简单小画板的具体代码,供大家参考,具体内容如下 Html部分: Document CSS部分: *{ margin: 0; padding: 0; list-s ...

Uni-App 画布 Canvas 用法小练之画个五角星

Uni-App 画布 Canvas 用法小练之画个五角星相关推荐

最新文章

热门文章