未完成的Canvas

最新推荐文章于 2023-06-08 15:50:16 发布
最新推荐文章于 2023-06-08 15:50:16 发布
阅读量347 收藏
点赞数
分类专栏： 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

				
			

			

				

					m0_67402731的博客
				

				

					03-02
					
					383
					
				

			

		

		

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

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

			
		

	



                

              
                



	

		

			

				
					
前端可视化——Canvas

				
			

			

				

					mapbar_front的博客
				

				

					03-12
					
					7871
					
				

			

		

		

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

1、canvas元素替换内容。

使用文本的方式

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


使用图片的方式

<canvas><img src=...

			
		

	



                


  
              

                


	

		

			

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

				
			

			

				

					前端、python爱好者
				

				

					07-07
					
					4351
					
				

			

		

		

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

			
		

	





	

		

			

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

					
最新发布

				
			

			

				

					PiPiFamily的博客
				

				

					06-08
					
					4099
					
				

			

		

		

			
				
canvas使用详细教学

			
		

	



		

			
		



	

		

			

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

				
			

			

				

					09-28
				

			

		

		

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

			
		

	





	

		

			

				
					
HTML5 canvas基本绘图之填充样式实现

				
			

			

				

					09-27
				

			

		

		

			
				
接着，我们加载了一个图片，当图片加载完成后，使用它创建一个位图图案，并将其应用到整个canvas上。  通过熟练掌握HTML5 canvas的填充样式，开发者可以创造出各种复杂且富有创意的图形效果，增强网页的视觉表现力。...

			
		

	





	

		

			

				
					
canvas绘制视频封面的方法

				
			

			

				

					09-27
				

			

		

		

			
				
首先，我们要了解需求：当用户上传视频时，系统需要自动截取视频的第一帧作为视频的封面，以便用户在未播放视频前就能预览其内容。这个功能对于提高用户体验至关重要。  实现这个功能的核心是HTML5的Canvas API，它...

			
		

	





	

		

			

				
					
js-canvas:一些未完成的 Javascript 实验标记 2009 年左右

				
			

			

				

					06-02
				

			

		

		

			
				
js画布2009 年左右使用 Javascript <canvas> 标签的一些未完成的实验

			
		

	





	

		

			

				
					
javaScript canvas实现(画笔大小 颜色 橡皮的实例)

				
			

			

				

					10-18
				

			

		

		

			
				
注意，橡皮擦实际上只是改变了颜色，实际的绘图操作并未改变，只是在视觉上看起来像是擦除了部分图像。  此外，该实例还包含了形状选择的功能。`shapeChange()`函数根据用户从下拉列表中选择的形状类型（圆形、矩形...

			
		

	





	

		

			

				
					
基于HTML5 Canvas和jQuery 的画图工具的实现

				
			

			

				

					08-13
				

			

		

		

			
				
基于HTML5 Canvas和jQuery 的画图工具的实现
参考博文：
http://blog.csdn.net/luanlouis/article/details/38490589

			
		

	





	

		

			

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

				
			

			

				

					葡萄城技术团队博客
				

				

					08-24
					
					1797
					
				

			

		

		

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

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

			
		

	





	

		

			

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

				
			

			

				

					mrbbcool的博客
				

				

					03-10
					
					1512
					
				

			

		

		

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

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

			
		

	





	

		

			

				
					
【JavaScript】------- Canvas 实现电子签名实例代码

				
			

			

				

					皮皮冰要做大神
				

				

					08-04
					
					860
					
				

			

		

		

			
				
1. 这个例子只是实现电子签名 如何让他符合业务 看你们的了



<!DOCTYPE html>
<html>
<head> 
    <meta charset="utf-8" />
    <meta content="width=device-width,initial-scale=1,maximum-scale=1" name="viewport" />
    <title>签到</title>
    &...

			
		

	





	

		

			

				
					
html5新增标签canvas画布基础详解及实操案例（上）

				
			

			

				

					dayewandou的博客
				

				

					10-08
					
					2571
					
				

			

		

		

			
				
如果文章有不对之处，还请大神们多多指点
    canvas也是html中的一个元素，可以给这个元素添加一些html属性，属性width默认为300px，heigth默认为150px；
    canvas是h5中新增的众多元素中的一个，直译过来叫做画布，可以用来通过h5绘制一些图形效果；
    刚开始的时候只是知道是用来做一些图形效果的，但是后来了解到canvas的强大
    可以制

			
		

	





	

		

			

				
					
关于canvas的图片获取及处理

				
			

			

				

					YYLOVEYY520的博客
				

				

					12-08
					
					2063
					
				

			

		

		

			
				
关于canvas的图片获取及处理获取canvas图片的对应base64的uri（echart图、v-chart图前端处理生成的uri，可以生成一张图片python处理canvas生成的base64 uri
获取canvas图片的对应base64的uri（echart图、v-chart图
canvas元素.toDataURL()获取对应canvas的base64 uri的链接
前端处理生成的uri，可以生成一张图片
<img src="base64uri"/>

python处理canvas生成的

			
		

	





	

		

			

				
					
前端性能优化：Canvas

				
			

			

				

					薛定谔的猫-前端领域
				

				

					05-14
					
					2087
					
				

			

		

		

			
				
Canvas 最常见的用途是渲染动画，目前，所有的主流浏览器都支持。



渲染动画的基本原理，无非是反复地擦除和重绘。为了动画的流畅，60Hz 刷新率设备的帧预算为 16.67ms，在这个时间之内，计算每个对象的位置、状态，还需要把它们都画出来。高刷设备的帧预算更低。所以需要时刻关注性能，防止计算和绘制耗时过长造成卡顿。

基础优化

1. 在离屏canvas上预渲染相似的图形或重复的对象

对于在每个动画帧上的重复相同的绘制操作，请考虑将其分流到屏幕外的画布上。然后根据需要频繁地将屏幕外图像渲染到主..

			
		

	





	

		

			

				
					
五分钟学会 Canvas 基础（一）

				
			

			

				

					Tox-boy的博客
				

				

					07-18
					
					3768
					
				

			

		

		

			
				
0.前言

最近忙里偷闲，来写的这篇文章，但是中午出去吃个饭，回来因为自己的误操作，把上午的文章全删除了，还没法找回。

小编真的是瞬间觉得整个人生都灰暗了。

心塞，这次真的不想多说什么了。

————-我是华丽的分割线————–

终于把这篇文章写完了，关于本文，针对读者主要是之前从未接触过 Canvas的同学。当然，你要学 canvas 一定要有 JS 基础啦。

其

			
		

	





	

		

			

				
					
html2canvas 0.5.0文档

				
			

			

				

					05-26
				

			

		

		

			
				
html2canvas是一个将HTML页面渲染成canvas图像的JavaScript库。以下是html2canvas 0.5.0的文档：

## 安装

使用npm安装：

```
npm install html2canvas
```

或者直接在HTML文件中引入：

```html
<script src="https://html2canvas.hertzen.com/dist/html2canvas.min.js"></script>
```

## 使用

### 基本用法

```javascript
html2canvas(document.body).then(function(canvas) {
    document.body.appendChild(canvas);
});
```

上面的代码将把当前页面的HTML元素渲染成canvas元素，并将其插入到页面中。

### 配置项

html2canvas还提供了一些配置选项，可以通过传递一个选项对象来设置这些选项。

```javascript
html2canvas(document.body, {
    allowTaint: true,
    backgroundColor: '#ffffff',
    useCORS: true
}).then(function(canvas) {
    document.body.appendChild(canvas);
});
```

下面是html2canvas支持的全部选项：

- `allowTaint`（布尔值，默认为`false`）：允许绘制跨域图片。如果设置为`true`，将会禁用tainted canvas错误的检查。
- `backgroundColor`（字符串，默认为`#ffffff`）：指定背景颜色。可以是任何CSS颜色值。
- `canvas`（HTMLCanvasElement）：使用给定的canvas元素进行绘制，而不是创建新的canvas元素。
- `foreignObjectRendering`（布尔值，默认为`false`）：允许在canvas中绘制外部对象，如`<iframe>`、`<video>`或`<embed>`。如果设置为`true`，将会使用带有外部内容的`<foreignObject>`元素进行绘制。
- `height`（数字）：指定canvas的高度。如果未指定，将使用元素的高度。
- `letterRendering`（布尔值，默认为`false`）：允许在canvas中绘制字母。如果设置为`true`，将会使用单独的canvas元素进行绘制，以使字母更加清晰。
- `logging`（布尔值，默认为`false`）：启用日志记录。
- `proxy`（字符串）：跨域代理的URL地址。html2canvas将会使用这个URL来加载跨域资源。
- `scale`（数字，默认为`window.devicePixelRatio`）：指定绘制时的比例。可以是任何数字，但通常使用`window.devicePixelRatio`来绘制高清图像。
- `scrollX`（数字）：指定水平滚动条的位置。可以是任何数字，但通常使用元素的`scrollLeft`属性来指定位置。
- `scrollY`（数字）：指定垂直滚动条的位置。可以是任何数字，但通常使用元素的`scrollTop`属性来指定位置。
- `useCORS`（布尔值，默认为`false`）：使用跨域资源共享（CORS）来加载跨域图片。

### 方法

html2canvas还提供了一些方法，可以在渲染过程中进行操作。

#### `html2canvas.cancel()`

取消当前的渲染过程。

```javascript
var promise = html2canvas(document.body);
promise.cancel();
```

#### `html2canvas.punish()` 和 `html2canvas.reward()`

这两个方法用于惩罚或奖励html2canvas的性能。默认情况下，html2canvas会尝试使用最快速的方式进行渲染，但在某些情况下，它可能会导致渲染失败或产生低质量的图像。使用`punish()`方法可以告诉html2canvas尝试使用更准确的但更慢的渲染方法，而使用`reward()`方法可以告诉html2canvas尝试使用更快的但可能会产生低质量图像的渲染方法。

```javascript
html2canvas(document.body, {
    onrendered: function(canvas) {
        if (canvas.width > 500) {
            html2canvas.punish();
            html2canvas(document.body, {
                onrendered: function(canvas) {
                    // ...
                }
            });
        } else {
            html2canvas.reward();
        }
    }
});
```

### 事件

html2canvas还提供了一些事件，可以在渲染过程中进行操作。

#### `onbeforeload`

在加载跨域图片之前触发。可以使用它来修改图片的URL。

```javascript
html2canvas(document.body, {
    onbeforeload: function(image) {
        if (image.src.indexOf('http://example.com/') === 0) {
            image.src = 'http://proxy.example.com/?url=' + encodeURIComponent(image.src);
        }
    }
});
```

#### `onload`

在图片加载完成后触发。

```javascript
html2canvas(document.body, {
    onload: function(image) {
        console.log('Image loaded:', image.src);
    }
});
```

#### `onclone`

在克隆DOM元素之前触发。可以使用它来修改DOM元素的样式或内容。

```javascript
html2canvas(document.body, {
    onclone: function(clone) {
        clone.querySelectorAll('img').forEach(function(img) {
            img.src = '/path/to/placeholder.png';
        });
    }
});
```

#### `onrendered`

在渲染完成后触发。渲染结果将作为参数传递给该事件处理函数。

```javascript
html2canvas(document.body, {
    onrendered: function(canvas) {
        console.log('Canvas rendered:', canvas);
    }
});
```

### 错误处理

html2canvas可能会产生一些错误，例如渲染失败或跨域资源不可用。以下是一些常见的错误类型及其处理方法。

#### tainted canvas

当尝试从包含跨域图片的canvas中提取数据时，浏览器会抛出`tainted canvas`错误。如果要允许绘制跨域图片，请将`allowTaint`选项设置为`true`。

```javascript
html2canvas(document.body, {
    allowTaint: true
});
```

#### SecurityError

当尝试读取跨域iframe中的内容时，浏览器会抛出`SecurityError`错误。如果要允许在canvas中绘制外部对象，请将`foreignObjectRendering`选项设置为`true`。

```javascript
html2canvas(document.body, {
    foreignObjectRendering: true
});
```

#### NS_ERROR_NOT_AVAILABLE

当尝试读取跨域资源时，浏览器会抛出`NS_ERROR_NOT_AVAILABLE`错误。如果要使用跨域代理来加载跨域资源，请将`proxy`选项设置为代理的URL地址。

```javascript
html2canvas(document.body, {
    proxy: 'http://proxy.example.com/'
});
```

### 支持的浏览器

html2canvas支持所有现代浏览器和IE9及以上版本。请注意，它需要浏览器支持`<canvas>`元素和`<foreignObject>`元素。

## 参考资料

- [html2canvas官网](https://html2canvas.hertzen.com/)
- [html2canvas Github仓库](https://github.com/niklasvh/html2canvas)

			
		

	



              



  
“相关推荐”对你有帮助么？

  

      
    
          
  • 
              
    
                  
                  
              
    
              
    非常没帮助
    
          
    • 
          
  • 
              
    
                  
                  
              
    
              
    没帮助
    
          
    • 
          
  • 
              
    
                  
                  
              
    
              
    一般
    
          
    • 
          
  • 
              
    
                  
                  
              
    
              
    有帮助
    
          
    • 
          
  • 
              
    
                  
                  
              
    
              
    非常有帮助
    
          
    • 
      

      

      

          
          提交
      

      

  




          




        



    





    



      

      

        
      

      





	

		评论	
	

	
	




  

    

      添加红包
      
    

    

      

        
        

          
          
        

        
请填写红包祝福语或标题

      

      

        
        

          
          个
        

        
红包个数最小为10个

      

      

        
        

          
          元
        

        
红包金额最低5元

      

      

        
        

          当前余额3.43元
          前往充值 >
        

      

      

        

          需支付：10.00元
        

        
        
      

    

  





  

    
    
  

  

    
    
  








  

    

      

        

          

            
            
成就一亿技术人!

          

          

        

        

          

          

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

        

      

      

        

          

            
              
            
            

              
hope_wisdom
 发出的红包
            

          

        

        

          

          

          

        

      

    

    

  



      
      

      
实付元

      
使用余额支付

      

        

          

            
            点击重新获取
          

        

        
扫码支付

      

      

        
          
            
          
          
        
      

      

        
        钱包余额
          0
          

            
            

              

                
抵扣说明：

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

              

            

          

      

      余额充值