canvas画正六边形

秒速五厘米 2022-07-15 08:37 189阅读 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 条评论，189人围观）

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

相关阅读

相关 canvas图片画圆角

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

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

相关 canvas画旋转椭圆

要求使用画布变换方法。椭圆画法参照大神佳作：[http://web.jobbole.com/82960/][http_web.jobbole.com_82960] 效果如

小咪咪/ 2022年07月15日 08:37/ 0 赞/ 200 阅读

相关 canvas画正六边形

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

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

相关使用 canvas 画圆

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

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

相关 canvas画圆形图片

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

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

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

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

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

相关 Canvas 画圆

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

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

相关 Canvas—图形画刷

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

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

相关 canvas画时钟

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

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

相关 canvas画圆

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

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