canvas 画一个六边形

豪~豪 · 发表于 2022-7-21 15:11:10

[JavaScript] 纯文本查看 复制代码

var context = canvas.getContext("2d");
       
        //六边形横向宽
        width = 209;
        //边框粗细
        borderWidth = 3;
        //六边形边长
        hexagonWidth = (width - borderWidth)/4;
        //设置canvas宽高
        canvas.width = width;
        canvas.height = width / 2 * Math.sqrt(3) + borderWidth;

        //绘制六边形，裁切
        context.beginPath();
        context.save();
        context.translate(canvas.width/2,canvas.height/2);
        context.strokeStyle = '#333333';
        context.lineWidth = borderWidth;
        context.lineTo(-1*hexagonWidth,Math.sqrt(3)*hexagonWidth);
        context.lineTo(1*hexagonWidth,Math.sqrt(3)*hexagonWidth);
        context.lineTo(2*hexagonWidth,0*hexagonWidth);
        context.lineTo(1*hexagonWidth,-1 * Math.sqrt(3)*hexagonWidth);
        context.lineTo(-1*hexagonWidth,-1 * Math.sqrt(3)*hexagonWidth);
        context.lineTo(-2*hexagonWidth,0*hexagonWidth);
        context.lineTo(-1*hexagonWidth,Math.sqrt(3)*hexagonWidth);
 
        context.stroke();
        context.restore();
        context.clip();
        context.closePath();

怎么旋转一下变成这样样子！

豪~豪 · 发表于 2022-7-21 15:45:43

没有大佬吗

承易 · 发表于 2022-7-21 21:22:26

[HTML] 纯文本查看 复制代码

<html>
        <head>
                <style>
                        html,body{
                                width:100%;
                                height:100%;
                                padding:0;
                                margin:0;
                        }
                        canvas{
                                position: absolute;
                                top:0;
                                left:0;
                                right:0;
                                bottom:0;
                                margin:auto;
                        }
                </style>
        </head>
        <body>
                <canvas></canvas>
        </body>
        <script type="text/javascript">
                var canvas = document.getElementsByTagName('canvas')[0];
                var context = canvas.getContext("2d");
                
                //六边形横向宽
                width = 209;
                //边框粗细
                borderWidth = 3;
                //六边形边长
                hexagonWidth = (width - borderWidth)/4;
                
                //设置canvas宽高
                canvas.width = width;
                canvas.height = width / 2 * Math.sqrt(3) + borderWidth;
                
                //图片缩放比例
                imgScale = 0.5;
                
                //绘制图片
                var img = new Image()
                img.src = './1.png'
                img.onload = function(){
                    context.drawImage(this, canvas.width/2 - img.width/2*imgScale , canvas.height/2 - img.height/2*imgScale , img.width*imgScale , img.height*imgScale)
                        
                        //如果图片绘制后覆盖边框，可再次调用一边绘制六边形代码
                }
                
                //绘制六边形，裁切
                context.beginPath();
                context.save(); 
                context.translate(canvas.width/2,canvas.height/2);
                context.strokeStyle = '#79b1f7'; 
                context.lineWidth = borderWidth; 
                context.lineTo(-1*hexagonWidth,Math.sqrt(3)*hexagonWidth);
                context.lineTo(1*hexagonWidth,Math.sqrt(3)*hexagonWidth);
                context.lineTo(2*hexagonWidth,0*hexagonWidth);
                context.lineTo(1*hexagonWidth,-1 * Math.sqrt(3)*hexagonWidth);
                context.lineTo(-1*hexagonWidth,-1 * Math.sqrt(3)*hexagonWidth);
                context.lineTo(-2*hexagonWidth,0*hexagonWidth);
                context.lineTo(-1*hexagonWidth,Math.sqrt(3)*hexagonWidth);
                context.stroke(); 
                context.restore();
                context.clip();
                context.closePath();
        </script>
</html>

豪~豪 · 发表于 2022-7-22 08:43:29

承易发表于 2022-7-21 21:22
[mw_shl_code=html,true]

你这不就是我网上找的那个，和我这个图形一样的啊

豪~豪 · 发表于 2022-7-22 11:05:17

问题解决了，麻烦关闭一下帖子@精易客服

		自动登录	找回密码
密码			注册

[Web相关] canvas 画一个六边形