canvas画正六边形

秒速五厘米 2022-07-15 08:37 204阅读 0赞

效果图如下：

![Center][]

代码如下：

<!DOCTYPE html>
    <html>
    <head>
    	<title>正六边形</title>
    	<meta charset="utf-8">
    </head>
    <body>
    	<canvas id="canvas" width="400" height="400"></canvas>
    </body>
    <script type="text/javascript">
    	var canvas = document.querySelector('#canvas'),
    		context = canvas.getContext('2d');
    
    
    	// 定义边长、颜色、边数、canvas大小
    	var length = 100, fillColor = '#000', vertices = 6, size = 1000;
    	canvas.width = size;
    	canvas.height = size;
    
    	var getDegree = function(vertices, index) {
    		return 360 / vertices * (i + 0.5) + 90;
    	}
    
    	var getRadian = function(degree) {
    	    return degree * Math.PI / 180;
    	};
    	
        context.beginPath();
        for (var i = 0; i < vertices; i++) {
        	// 计算偏转
        	var degree = getDegree(vertices, i),
        		radian = getRadian(degree);
    
        	// 增加1/3的canvas大小位移量以免被边缘挡住
            var x = Math.cos(radian) * length + size / 3;
            var y = Math.sin(radian) * length + size / 3 ;
            context.lineTo(x, y);
        }
        context.closePath();
        context.stroke();
    </script>
    </html>

[Center]: /images/20220715/40249e9172624e868dd622bc13b60a1b.png

发表评论取消回复

表情：

评论列表（有 0 条评论，204人围观）

还没有评论，来说两句吧...

相关阅读

相关 Openlayers实战：绘制矩形，正方形，正六边形

Openlayers地图中，绘制图形是非常重要的一个功能。Openlayers主要使用draw类来绘制图形，在实际项目中有时候会绘制矩形和正多边形。下面的示例是绘制矩形，正方

布满荆棘的人生/ 2024年03月17日 15:46/ 0 赞/ 51 阅读

相关 canvas图片画圆角

获取屏幕比率有的手机屏幕实际分辨率的像素比页面过去的尺寸像素要大，一遍是一倍或者两倍 var getPixelRatio = function(context)

冷不防/ 2023年01月11日 08:52/ 0 赞/ 268 阅读

相关 canvas画正六边形

效果图如下： ![Center][] 代码如下： <!DOCTYPE html> <html> <head> <titl

秒速五厘米/ 2022年07月15日 08:37/ 0 赞/ 205 阅读

相关使用 canvas 画圆

src="https://mdn.mozillademos.org/zh-CN/docs/learn/JavaScript/Building\_blocks/Looping\_

缺乏、安全感/ 2022年06月03日 09:28/ 0 赞/ 272 阅读

相关 canvas画圆形图片

效果图： ![70][] 实现环境在微信小程序中参考网站[https://www.jianshu.com/p/9a6ee2648d6f][https_www.ji

谁践踏了优雅/ 2022年05月26日 12:36/ 0 赞/ 272 阅读

相关 Canvas-动态绘制六边形（多个六边形）

做了一个鼠标滑过框自动绘制六边形：代码案例： <!DOCTYPE html> <html><head> <meta http-equiv

朱雀/ 2022年04月03日 09:16/ 0 赞/ 487 阅读

相关 Canvas 画圆

原文地址：http://hi.baidu.com/lj2tj/item/557d8d1a65adfa721009b58b \-----------------------

爱被打了一巴掌/ 2021年12月15日 11:55/ 0 赞/ 442 阅读

相关 Canvas—图形画刷

`createPattern`可以创建一个画刷模式，进而可以设置到`fillStyle`里，进行画刷的填充。函数原型：`ctx.createPattern(image

小咪咪/ 2021年12月14日 23:53/ 0 赞/ 412 阅读

相关 canvas画时钟

![70][] 效果如上，可以获取当前时间显示，秒针可以动．１．文件结构： ![70 1][] ２．html: <!DOCTYPE html>

忘是亡心i/ 2021年10月09日 04:18/ 0 赞/ 566 阅读

相关 canvas画圆

画圆方法说明 arc(x, y, radius, startAngle, endAngle, anticlockwise) 该方法有六个参数：x,y为绘制圆弧所

雨点打透心脏的1/2处/ 2021年07月24日 16:22/ 0 赞/ 600 阅读