canvas多边形的画法示例-

?本文主要介绍了canvas多边形(蜘蛛图)的画法示例的相干材料，小编觉得挺不错的，此刻分享给大家，也给大家做个参照 。一起追随小编过来看看吧，但愿能帮忙到大家。 本文主要介绍了canvas多边形(蜘蛛图)的画法示例的相干材料，小编觉得挺不错的，此刻分享给大家，也给大家做个参照 。一起追随小编过来看看吧，但愿能帮忙到大家。

蜘蛛图的画法:

在开端以前,我们需要晓得canvas是怎样进行图像的绘制,canvas 元素用于在网页上绘制图形。HTML5 的 canvas 元素运用 JavaScript 在网页上绘制2D图像。 在矩形区域的画布上，控制其每一像素，JavaScript 来绘制 2D图形，逐像素进行渲染。可以通过多种办法运用canvas 元素绘制途径、矩形、圆形、字符以及增加图像。

* 注意！！！canvas 标签自身是不具备画图功能，只能运用 JavaScript 在网页上绘制图像。

结果图如下所示:

  //初始化
  (function(){
    var canvas = document.createElement('canvas');
    document.body.appendChild(canvas);
    canvas.height = mH;
    canvas.width = mW;
    mCtx = canvas.getContext('2d');
    drawPolygon(mCtx); // 绘制多边形边
    drawLines(mCtx); //顶点连线
    drawText(mCtx); // 绘制文本
    drawRegion(mCtx);  // 绘制数据
    drawCircle(mCtx);  // 画数据圆点
  })();

上面代码中,通过一个立刻施行函数,进行对所有的设定进行初始化,关于canvas正六边形的画法,可拜见canvas画正六边形

在蜘蛛图中,我们可以进行拆分一下,通过画六边形,直线,圆圈的方式,离别进行完备个体的组件,然后通过办法进行同一调取绘制

如下面所示源代码:

    
    
    



    
    



    

    
打赏
    

    

    	
        
    	

    		
感谢您的支持，我会继续努力的!
    	
    	

    		
    	
    		
扫码打赏，你说多少就多少
    	

    		

	    		
	    		
    		
    		

	    		
	    		
    		
    	
    	

    		
打开支付宝扫一扫，即可进行扫码打赏哦
    		
百分百源码网 建议打赏1～10元，土豪随意，感谢您的阅读！