未完成的Canvas

最新推荐文章于 2023-06-09 11:35:33 发布
最新推荐文章于 2023-06-09 11:35:33 发布
阅读量350 收藏
点赞数
分类专栏： Canvas
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/Hocen_Jonin/article/details/71227064
版权 
 

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>123456789</title>
    <link rel="stylesheet" href="style.css">
</head>
<body>
    <div style="width: 1800px; margin: 0 auto; position: relative; ">
        <canvas id="myCanvas" width="1800" height="900"></canvas>
        <div class="TPY" >
            <p>特派员</p>
        </div>
        <div class="TPY1" >
            <p>扶贫</p>
        </div>
        <div class="TPY2" >
            <p>科技成果</p>
        </div>
        <div class="TPY3" >
            <p>星创天地</p>
        </div>
    </div>

<script>    
    var MyCanvas = document.getElementByIdx-x-x-x("myCanvas");
    var Graph = MyCanvas.getContext("2d");    //能量方格
 

    function energyBlank(a,b,number,color)
 

 {        //a为起点弧度，b为终点弧度，number为能量方格的数量
 

        Graduate(a,b,430+10*number,color);
 

        Graduate(a,b,430,"#062e48");
 

        for(var i=0;i<number;i++){
 

            circle(10*i+440,"#062e48",3);
 

        }
 

    }
 

    energyBlank(344.3,345.7,16,"yellow");
 

    energyBlank(10.3,11.7,16,"blue");
 

    energyBlank(164.3,165.7,16,"red");
 

    energyBlank(190.3,191.7,16,"pink");
 

    //算出线条的数量
 

    for(var i=0;i<180;i++){
 

        curve(2*i,2*(i+1),1000);
 

    }    //线圈弧形    function curve(a,b,r){
 

        Graph.beginPath();
 

        Graph.moveTo(900,450);
 

        Graph.arc(900,450,r,rads(a),rads(b),false);
 

        Graph.closePath();
 

        Graph.lineWidth=1;
 

        //定义变量 canvasGradient  弧型线中心处的渐变效果 以（900,450,0,900,450,r）x坐标（900）、y坐标（450）、半径（0）到半径为r的外圆（圆心坐标点同为900,450）
 

        var canvasGradient = Graph.createRadialGradient(900,450,0,900,450,r);
 

        //从0-0.2的位置的渐变
 

        canvasGradient.addColorStop(0,"rgba(0,0,0,0)");
 

        canvasGradient.addColorStop(0.2,"rgba(0,0,0,0)");
 

        //从0.2（开始）-0.3（结束）的位置的渐变
 

        canvasGradient.addColorStop(0.2, "#062e48");
 

        canvasGradient.addColorStop(0.3, "#0c3352");
 

        canvasGradient.addColorStop(1, "#1d455f");
 

        Graph.strokeStyle = canvasGradient;
 

        Graph.stroke();
 

    }
 

    function rads(x){
 

        return Math.PI*x/180;
 

    }    //弧线上面的圆线
 

    function circle(r,color,line)
 

    {
 

        Graph.beginPath();
 

        Graph.strokeStyle=color;
 

        Graph.lineWidth=line;
 

        Graph.arc(900,450,r,0,2*Math.PI);
 

        Graph.stroke();
 

    }
 

    //线的属性（半径，颜色，宽度）
 

    circle(720,"#1d455f",1);
 

    circle(670,"#1d455f",1);
 

    circle(420,"#1d455f",1);
 

    //四个角落遮罩
 

    function shade(a,b,c,d,e,f){
 

        Graph.beginPath();
 

        Graph.moveTo(a,b);
 

        Graph.lineTo(c,d);
 

        Graph.lineTo(e,f);
 

        Graph.strokeStyle = "#062e48";
 

        Graph.fillStyle = "#062e48";
 

        //Graph.closePath();/*可有可无 关闭绘制的路径*/
 

      		Graph.fill();
 

        Graph.stroke();
 

    }
 

    //四个角落的遮罩图
 

    shade(0,0,0,320,520,0);
 

    shade(0,900,250,900,0,760);
 

    shade(1800,0,1550,0,1800,140);
 

    shade(1800,900,1550,900,1800,280);
 

    //四个区域的方格能量
 

    function Graduate(a,b,r,color)
 

    {
 

        Graph.beginPath();
 

        Graph.moveTo(900,450);
 

        Graph.arc(900,450,r,rads(a),rads(b),false);
 

        Graph.closePath();
 

        Graph.strokeStyle = "#062e48";
 

        Graph.stroke();
 

        //该对象的作用域是以(900,450)为圆心、半径为0px的内圆和以(950,450)为圆心、半径为r的外圆之间的环状区域
 

        var canvasGradient = Graph.createRadialGradient(900,450,410,900,450,670);
 

        canvasGradient.addColorStop(0, "#062e48");
 

        canvasGradient.addColorStop(1, color);
 

        Graph.fillStyle = canvasGradient;
 

        Graph.fill();
 

    }
 

    //能量格文字
 

    var textArr=["xxxxx"];
 

    var num = 2*Math.PI/360;
 

    Graph.translate(900,450);
 

    function angle(Txtangle)
 

    {
 

        for(var i=0;i<1;i++){
 

            Graph.save();
 

            Graph.beginPath();
 

            Graph.rotate((i*2+Txtangle)*num);
 

            Graph.fillStyle="#fff";
 

            Graph.font="14px 宋体";
 

            Graph.fillText(textArr[i],600,0);
 

            Graph.restore();
 

            Graph.stroke();
 

        }
 

    }
 

   angle(11.7);
 

   angle(327.7);
 

   angle(191.7);
 

   angle(147.7);
 

</script>
 

</body>
 

</html>
 


                

        

        

    




    

      

        

            

              
                
                  H-哈哈哈哈
                
              
            

            

                关注
              
            

        

        

          
    
            
  • 
              
                
                
                
                
                      0
                
              
              
    点赞
    
            
    • 
            
  • 
              
                
                
                
              
              
    踩
    
            
    • 
            
  • 
              
                
                
                
                
                    0
                
              
              
    
                
    
                  
                    收藏
                  
                
    
              
    
              
    
                
    
                  觉得还不错?
                  
                    一键收藏
                  
                 
                
    
              
    
            
    • 
          
  • 
            
    
              
              
            
    
              
              
              
                    0
              
            
            
    评论
    
          
    • 
          
  • 
          
    • 
          
  • 
            
              
            
              
    
            
              
                
            
    
          
    • 
        

      

      

            

                专栏目录
          










                



	

		

			

				
					
canvas截屏

				
			

			

				

					04-19
				

			

		

		

			
				
 - 解决方案：在绘制canvas时，应考虑到设备像素比，设置canvas的width和height为设备像素比乘以期望的视口尺寸，然后在绘制完成后，调用`toDataURL()`方法时传入适当的dpi参数，如`toDataURL('image/png', 1.0)`，...

			
		

	



                

              
                



	

		

			

				
					
（新手前端大神看到莫喷）Canvas基础

				
			

			

				

					qq_37650349的博客
				

				

					04-11
					
					248
					
				

			

		

		

			
				
本文主要是练习博客的使用方法！

			
		

	



                


  
              

                


	

		

			

				
					
前端系列——Canvas

				
			

			

				

					qq_51553982的博客
				

				

					12-17
					
					2238
					
				

			

		

		

			
				
canvas的用途有很多，常用于绘制各类图形，如我们常用的Echarts就是使用canvas构建的。canvas的默认大小为长：300px，宽：150px。使用drawImage函数。

			
		

	





	

		

			

				
					
前端可视化——Canvas

				
			

			

				

					mapbar_front的博客
				

				

					03-12
					
					7895
					
				

			

		

		

			
				
Canvas
基本使用
<canvas id="tutorial" width="300" height="300"></canvas>

1、canvas元素替换内容。

使用文本的方式

<canvas>你的浏览器不支持 canvas，请升级你的浏览器。</canvas>


使用图片的方式

<canvas><img src=...

			
		

	



		

			
		



	

		

			

				
					
【HTML】【一文全解Canvas】从初学到实战，彻底掌握前端绘图神器！

				
			

			

				

					weixin_55846296的博客
				

				

					06-09
					
					9419
					
				

			

		

		

			
				
前言一、Canvas 概述二、在 HTML 中使用 Canvas三、Canvas 绘制图形1、绘制矩形2、绘制圆形a. 绘制实心圆形b. 绘制空心圆形四、Canvas 绘制文本五、Canvas 绘制图片六、Canvas 动画效果1、setInterval() 实现动画2、requestAnimationFrame() 实现动画七、Canvas 使用注意事项八、利用Canvas绘制挂钟（原理-绘制弧形）- 简单练习1、 还原坐标系2、 绘制背景3、 绘制时钟指针4、循环绘制。

			
		

	





	

		

			

				
					
前端 Canvas基础 （一）【基本图形】

				
			

			

				

					前端、python爱好者
				

				

					07-07
					
					4361
					
				

			

		

		

			
				
canvas [ˈkænvəs]  ：画布
这是一个HTML5新增的标签，使用这个标签我们可以通过JS在该标签中直接画出各种图形。这时，JS类似画家手中的画笔，canvas就相当于画家画笔下的画布。当然，如果只是画静态图，岂不是显得很low了，我们实际开发中用canvas比较多的肯定是用它做出来的各种动画。更多的介绍这里就不赘述了。下面我们看看在我自己开发网站中用到的一些canvas。很多的2D（2d）甚至3D（webgl）动画都靠它进行渲染。我们先看看两个图片例子吧(第一张登录页中使用了webgl【图片下

			
		

	





	

		

			

				
					
html2canvas(1.0.0)

				
			

			

				

					02-22
				

			

		

		

			
				
3. **异步处理**：html2canvas采用异步方式加载图片，确保所有资源都加载完成后再进行渲染，避免了因图片未加载导致的空白问题。  4. **回调函数**：提供onrendered回调函数，当Canvas渲染完成后会触发，开发者可以...

			
		

	





	

		

			

				
					
自定义的画板canvas

				
			

			

				

					08-10
				

			

		

		

			
				
实现这一功能，通常是通过设置当前绘图颜色为背景色，或者改变绘图模式为擦除模式来完成的。  4. **颜色与粗细切换**：用户可以更改线条颜色和粗细，这需要维护一个颜色选择器和线宽选择器，用户选择颜色或线宽后，...

			
		

	





	

		

			

				
					
html2canvas示例

				
			

			

				

					05-25
				

			

		

		

			
				
2. **等待资源加载**：在调用html2canvas之前，确保所有图片和其他资源已经加载完成。 3. **处理异步内容**：如果存在异步加载的内容，使用Promise或async/await确保其加载后再进行截图。 4. **调整Z-Index**：确保...

			
		

	





	

		

			

				
					
html5通过canvas实现刮刮卡效果示例分享

				
			

			

				

					09-28
				

			

		

		

			
				
首先，创建一个新的Image对象，加载图片，当图片加载完成后，我们获取Canvas的2D渲染上下文（ctx），并设置Canvas的宽高与图片一致。这样，Canvas就会自动适应图片的尺寸。然后，定义`layer`函数来绘制灰色涂层，...

			
		

	





	

		

			

				
					
e语言-易语言超级画笔

				
			

			

				

					08-23
				

			

		

		

			
				
易语言超级画笔源码例程程序结合易语言模块智圆行方GDI-GDI 高级模块 5.5.ec，调用模块命令在画板上描直线，实现类似毛笔的效果。

			
		

	





	

		

			

				
					
【前端】【canvas详解 非常详细的使用方法】

				
			

			

				

					PiPiFamily的博客
				

				

					06-08
					
					4272
					
				

			

		

		

			
				
canvas使用详细教学

			
		

	





	

		

			

				
					
Canvas的基本介绍与使用，图解+案例带你快速上手Canvas

				
			

			

				

					~~~
				

				

					09-16
					
					4921
					
				

			

		

		

			
				
Canvas的基本介绍与使用，图解+案例带你快速上手Canvas


			
		

	





	

		

			

				
					
php网站分享qq代码下载,HTML5QQ登录的一篇代码分享

				
			

			

				

					weixin_30983965的博客
				

				

					03-16
					
					564
					
				

			

		

		

			
				
html5背景*{margin:0;padding:0;list-style-type:none;}a,img{border:0;}$(function () {if (!window.ActiveXObject && !!document.createElement("canvas").getContext) {$.getScript("http://im-img.qq.com/...

			
		

	





	

		

			

				
					
前端装逼必备--Canvas

				
			

			

				

					m0_67402731的博客
				

				

					03-02
					
					388
					
				

			

		

		

			
				
如果写代码不是为了装逼，那人生将毫无意义。都2020年了，如果你从事前端开发，连canvas都不会用，那你拿啥去装逼？下面跟着笔者一起来看看canvas是啥，可以用来做啥，有哪些产品是canvas做出来的。

Canvas介绍
1.canvas是html5的一个新标签，属于h5的新特性
2.canvas标签是一个图形的容器，简单点说就是一块画布，你可以在上画矩形，圆形，三角形，折线等等,也可以用来画logo
3.它是通过javascript来画的，即脚本绘制图形
canvas可以用来干啥呢？
1.制作web

			
		

	





	

		

			

				
					
canvas概述

				
			

			

				

					weixin_47075145的博客
				

				

					07-24
					
					1240
					
				

			

		

		

			
				
以前我们用div+css可以绘制矩形、圆角矩形、圆形、或者椭圆形，可是若想绘制三角形、五角形，或者异形，那就很难了。因此，这个时候我们就需要使用canvas绘图。我们可以使用canvas绘制复杂图形，做动画，处理图像，开发游戏，处理视频…这时候，会svg的小伙伴可能会说，用svg也可以绘制上面的形状。svg与canvas确实有着很多共通之处，很多项目可以用SVG开发，也可以用canvas开发。svg，是矢量图形，缩放不失真；支持鼠标事件，选择方便；不适合图形数量较大的场景。...............

			
		

	





	

		

			

				
					
HTML界的“苏炳添”——详解Canvas优越性能和实际应用

				
			

			

				

					葡萄城技术团队博客
				

				

					08-24
					
					1807
					
				

			

		

		

			
				
Google Docs宣布将会把HTML迁移到基于Canvas渲染，这一消息的出现再次把几年前随HTML5诞生的标签重新推到了人们视线之中。Canvas在刚推出时主打的优势就是更快的渲染速度，堪称HTML届的“苏炳添”，刷新了人们对Web页面元素绘制速度的印象。但Canvas的优势仅限于此吗？

（苏炳添，亚洲百米第一人）
HTML绘图届的前辈：SVG
Canvas是HTML5时代引入的“新”标签。与很多标签不同，Canvas不具有自己的行为，只将一组API 展现给客户端 JavaScript ，让开发者使

			
		

	





	

		

			

				
					
web前端入门（二）-canvas绘图

				
			

			

				

					mrbbcool的博客
				

				

					03-10
					
					1523
					
				

			

		

		

			
				
1.canvas中绘制的图形，坐标都是相对于canvas元素的左上角坐标，canvas左上角为（0，0）坐标点。如下图中，中绘制了个矩形，该矩形左上角相对于 canvas 的左边距为 W2 ,上边距为 H2，则该矩形左上角顶点坐标为（W2,H2）。

2.使用 rotate 旋转坐标时，默认以 canvas 的 左上角为中心点。例如要使绘制的矩形绕矩形中心点旋转，如果直接使用
var canvas...

			
		

	





	

		

			

				
					
npm install html2canvas

					
最新发布

				
			

			

				

					06-28
				

			

		

		

			
				
这将会在你的项目`node_modules`文件夹下安装`html2canvas`库，并将其添加到项目的依赖中（如果`--save`选项未指定，它会默认添加到`package.json`的`dependencies`部分）。  安装完成后，你可以在JavaScript代码中...

			
		

	



              




          




        



    





    



      

      

        
      

      





	

		评论	
	

	
	




  

    

      添加红包
      
    

    

      

        
        

          
          
        

        
请填写红包祝福语或标题

      

      

        
        

          
          个
        

        
红包个数最小为10个

      

      

        
        

          
          元
        

        
红包金额最低5元

      

      

        
        

          当前余额3.43元
          前往充值 >
        

      

      

        

          需支付：10.00元
        

        
        
      

    

  





  

    
    
  

  

    
    
  








  

    

      

        

          

            
            
成就一亿技术人!

          

          

        

        

          

          

            领取后你会自动成为博主和红包主的粉丝
            规则
          

        

      

      

        

          

            
              
            
            

              
hope_wisdom
 发出的红包
            

          

        

        

          

          

          

        

      

    

    

  



      
      

      
实付元

      
使用余额支付

      

        

          

            
            点击重新获取
          

        

        
扫码支付

      

      

        
          
            
          
          
        
      

      

        
        钱包余额
          0
          

            
            

              

                
抵扣说明：

                
 1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
 2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

              

            

          

      

      余额充值