canvas手绘正五边形

一、基本用法：

alertShow(param: any, $index: any) {let $log = this.$log;let $scope = this.$scope;if (param !== $scope.lastObj) {param.show = true;if ($scope.lastObj !== null) {$scope.lastObj.show = false;}$scope.lastObj = param;$scope.radarAlert = true;if ($index === 0) {$(".radarChart_alert").css({left: $scope.arr[$index].x + 100 + "px", top: $scope.arr[$index].y + "px"});} else {$(".radarChart_alert").css({left: $scope.arr[$index].x, top: $scope.arr[$index].y + 40 + "px"});}}}
drawRadarChart() {$scope.radarChartCategroy = [{name1: "词汇短语", name2: "排名前34%", show: false},{name1: "口语运用", name2: "排名前34%", show: false},{name1: "听力理解", name2: "排名前34%", show: false},{name1: "阅读理解", name2: "排名前34%", show: false},{name1: "语法句法", name2: "排名前34%", show: false}];let $scope = this.$scope;let width: any, long: any, samll: any, big: any;getWidth();function getWidth() {width = $(".nav").width();$(".radarChart_div").height(width);$(".nav").height(width);$("#radarChart").attr({width: width, height: width});long = width / 2;samll = (width / 2) * Math.tan(36 * Math.PI / 180);big = (width / 2) / Math.cos(36 * Math.PI / 180);window.requestAnimationFrame(draw);let radarBtnWidth = $(".radarChart_select").width();let radarBtnHeight = $(".radarChart_select").height();$scope.arr = [{x: long - radarBtnWidth / 2, y: 5 - radarBtnHeight - 15},{x: -radarBtnWidth - 5, y: samll + 5 - radarBtnHeight / 2},{x: big * Math.sin(18 * Math.PI / 180) - radarBtnWidth * 2 / 3, y: big * Math.cos(18 * Math.PI / 180) + samll + radarBtnHeight / 2},{x: big * Math.sin(18 * Math.PI / 180) + big - radarBtnWidth / 3, y: big * Math.cos(18 * Math.PI / 180) + samll + radarBtnHeight / 2},{x: 2 * long + 5, y: samll + 5 - radarBtnHeight / 2}]for (let i = 0; i < $scope.arr.length; i++) {$(".radarChart_select").eq(i).css({left: $scope.arr[i].x + "px", top: $scope.arr[i].y + "px"});}}function draw() {let canvas = document.getElementById("radarChart");if (canvas.getContext) {var ctx = canvas.getContext("2d");ctx.clearRect(0, 0, width, width);ctx.beginPath();ctx.lineWidth = 1;ctx.lineJoin = "miter";ctx.strokeStyle = "rgba(255,255,255,.5)";ctx.moveTo(long, 5);ctx.lineTo(0, samll + 5);ctx.lineTo(big * Math.sin(18 * Math.PI / 180), big * Math.cos(18 * Math.PI / 180) + samll + 5);ctx.lineTo(big * Math.sin(18 * Math.PI / 180) + big, big * Math.cos(18 * Math.PI / 180) + samll + 5);ctx.lineTo(2 * long, samll + 5);ctx.lineTo(long, 5);ctx.moveTo(long, long / Math.sin(72 * Math.PI / 180));ctx.lineTo(long, 5);ctx.moveTo(long, long / Math.sin(72 * Math.PI / 180));ctx.lineTo(0, samll + 5);ctx.moveTo(long, long / Math.sin(72 * Math.PI / 180));ctx.lineTo(big * Math.sin(18 * Math.PI / 180), big * Math.cos(18 * Math.PI / 180) + samll + 5);ctx.moveTo(long, long / Math.sin(72 * Math.PI / 180));ctx.lineTo(big * Math.sin(18 * Math.PI / 180) + big, big * Math.cos(18 * Math.PI / 180) + samll + 5);ctx.moveTo(long, long / Math.sin(72 * Math.PI / 180));ctx.lineTo(2 * long, samll + 5);ctx.stroke();ctx.save();ctx.beginPath();ctx.fillStyle = "rgba(255,255,255,.5)";ctx.moveTo(long, long / Math.sin(72 * Math.PI / 180) - $scope.num + 5);ctx.lineTo(long - $scope.num * Math.sin(72 * Math.PI / 180), long / Math.sin(72 * Math.PI / 180) - $scope.num * Math.cos(72 * Math.PI / 180) + 5);ctx.lineTo(long - $scope.num * Math.sin(36 * Math.PI / 180), long / Math.sin(72 * Math.PI / 180) + $scope.num * Math.cos(36 * Math.PI / 180) + 5);ctx.lineTo(long + $scope.num * Math.sin(36 * Math.PI / 180), long / Math.sin(72 * Math.PI / 180) + $scope.num * Math.cos(36 * Math.PI / 180) + 5);ctx.lineTo(long + $scope.num * Math.sin(72 * Math.PI / 180), long / Math.sin(72 * Math.PI / 180) - $scope.num * Math.cos(72 * Math.PI / 180) + 5);
//                ctx.lineTo(long, long / Math.sin(72 * Math.PI / 180) - $scope.num + 5);ctx.fill();ctx.save();ctx.restore();if ($scope.time2 < 60) {window.requestAnimationFrame(draw);$scope.num = $scope.num + long / 60;$scope.time2 = $scope.time2 + 1;}}}}
}

            <div><div class="radarChart_div"></div><div class="nav"><canvas id="radarChart"></canvas><div class="radarChart_select" ng-repeat="item in radarChartCategroy" ng-click="events.alertShow(item, $index)"ng-class="{'radarChart_select_true':item.show,'radarChart_select_flase':!item.show}"><div>{{item.name1}}</div><div>{{item.name2}}</div></div><div class="radarChart_alert" ng-style="radarAlert ? {'display': 'flex'} : {'display': 'none'}"><div>213道</div><div>72%</div><div>正确答题</div><div>正确率</div></div></div><div class="radarChart_div"></div>              </div>

canvas手绘正五边形相关推荐

canvas 闭合_想使用SVG或者canvas 手绘闭合多边形，使用vml效果已经实现了，由于vml只能支持ie所以想转成SVG或canvas...
引用最近要实现一个功能,在一张图片上选好区域后,然后记录后选择的坐标.然后使用 map area 将所选区域显示出来. 我在网上找了一段vml的代码,能实现我的功能. 但是因为vml只支持ie,所以 ...
[Web]Canvas手绘时钟
这是一个手绘时钟的案例,是不是很可爱呢! <!DOCTYPE html> <html lang="en"> <head><meta cha ...
Android通过Canvas手绘一个折线图
简述 Android绘制图表,有强大的 MPAndroidChart,适合图表功能需求大的应用.至于如下图一个简单的展示作用的折线图还是可以自己封装手绘一个的这个就是要实现的最终效果定义的Styl ...
vue canvas手绘签名
需求公司业务想要在手机端h5搞个签名需求.签名好像在哪里见到过:好像钉钉上请假时有个签名可以仿照写一个思路想法既然是绘制那想到的是用 canvas 或者svg 应该都可以既然canvas 或 ...
canvas手绘heike代码雨（代码瀑布）
我想很多小伙伴可能听到黑客,就会想到下面这张图图片来自百度,如有侵权,私信必删心想后面这个代码雨很酷,很炫,由于学了canvas,闲不住,所以就有了我自己做的代码雨的效果了代码里面有详细注释,如 ...
php手绘功能,Canvas的手绘风格图形库Rough.js
这次给大家带来Canvas的手绘风格图形库Rough.js,使用Canvas的手绘风格图形库Rough.js的注意事项有哪些,下面就是实战案例,一起来看一下. 前言推荐一个基于Canvas的手绘风格 ...
php手绘功能,Canvas的手绘风格图形库Rough.js-
这次给大家带来Canvas的手绘风格图形库Rough.js,使用Canvas的手绘风格图形库Rough.js的注意事项有哪些,下面就是实战案例,一起来看一下. 前言推荐一个基于Canvas的手绘风格 ...
自定义View进阶-手绘地图（二）
前一篇说到了使用自定义ViewGroup实现手绘地图,没看过的可以移步,因为本篇会用到上一篇的部分内容自定义View-手绘地图(一) 和前一篇一样,实现图片的操作经过同样的操作.onMeasure, ...
手把手教你实现手绘风格图形
大家好,我是漫步,今天分享一篇高难度的图形绘制文章. Rough.js[1]是一个手绘风格的图形库,提供了一些基本图形的绘制能力,比如:虽然笔者是个糙汉子,但是对这种可爱的东西都没啥抵抗力,这个库的 ...

canvas手绘正五边形

一、基本用法：

canvas手绘正五边形相关推荐

最新文章

热门文章