canvas库fabric.js如何设置背景自适应-CSDN问答

使用Fabric.js循环添加图片，总是堆叠在一起

使用Fabric.js循环添加图片，总是堆叠在一起。代码如下： ``` var canvas = new fabric.Canvas("myPanel"); for (var i = 0; i < 5; i++) { var myLeft = i * 100; fabric.Image.fromURL("Images/PC.png", function (oImg) { oImg.left = myLeft; oImg.top = 400, canvas.add(oImg); }); ``` 发现这5张图片的left都是按照i=4的时候计算的，显示以后全部重合，请教一下这个情况是怎么回事儿？

如何将页面保存为图片（兼容IE），用html2canvas.min.js 不能兼容ie

FabricJS 在mac机器上对Canvas调整大小屏幕会闪烁

``` 我的HTML代码: <!DOCTYPE html> <html lang="en"> <head> <meta charset="utf-8" /> <title>Ionic App</title>  <script type="text/javascript" language='javascript' src="index.js"></script> <style type="text/css"> html, body { width: 100%; height: 100%; margin-top: 0px; margin-bottom: 0px; margin-left: 0px; margin-right: 0px; } #left { float: left; width: 20%; height: 100%; border: 0px solid red; padding: 0px; margin: 0px; } #center { float: left; width: 80%; height: 100%; border: 0px solid green; } #canvasWrapper { overflow: scroll; background: #FFFFFF; } #canvas{ border: 0px solid black; } </style> </head> <body id='body'> <div id='left'> <button onclick="init()">Init Canvas</button> <input type="file" onchange="chooseImage(event)"/><br/> <button onclick="zoomIn()">Zoom In</button> <button onclick="zoomOut()">Zoom Out</button><br/> </div> <div id='center'> <div id='canvasWrapper' tabIndex='0'> <canvas id="canvas" ></canvas> </div> </div> </body> </html> index.js代码: /*! index.js 使用FabricJS对钡条逻辑封装的*/ // 0 1 2 3 4 5 6 7 8 9 10 var zoomArray = [0.33, 0.4, 0.5, 0.66, 0.8, 1, 1.25, 1.5, 2, 2.5, 3]; //缩放的比例,都是对称的 var zoomIndex = 5; //当前的zoomIndex var canvasWrapper = null; //Canvas的包裹物,当外部的window大小变化时候需要对它的宽度和高度设置 var canvas = null; //Canvas var fCanvas = null; //中间的Fabric.Canvas var backgroundBase64 = null; var backgroundImage = null; //背景fabric.Image var backgroundImageWidth = 0 //Canvas的宽度,由图片的宽度决定 var backgroundImageHeight = 0; //Canvas的高度,由图片的高度决定 //Canvas的属性 var canvasAttrs = { imageSmoothingEnabled: false, enableRetinaScaling: false, stopContextMenu: true, //Menu禁用 fireLeftClick: true, //左按键启用 fireMiddleClick: true, //滚动键启用 fireRightClick: false, //右按键禁用 //selectionColor: '#CC00FF', //selection的颜色 selectionLineWidth: 2, //selection的线宽 selection: true, //selection启动 selectionBorderColor: '#FFFF00',//selection边框颜色 selectionFullyContained: true, //只有当selection全部包含Canvas.Object的时候才会被选中 selectionKey: 'ctrlKey' //使用ctrlKey进行多选 }; //图片属性,中间Canvas的背景图和坐下那个图 var imageAttrs = { left: 0, top: 0, selectable: false, //设置不能被选中,这样就可以作为背景图了 hoverCursor: "default", //设置它的鼠标形状 crossOrigin: 'Anonymous' }; /*! * OK选择文件 */ function chooseImage(event) { var file = event.target.files[0]; var reader = new FileReader(); reader.onload = function(event) { var imgBase64 = event.target.result; backgroundBase64 = imgBase64; //构造数据 var data = {}; var dataMap = {}; data['partitions'] = []; data['items'] = []; data['filters'] = {}; dataMap['data'] = data; dataMap["base64"] = backgroundBase64; loadData(dataMap); } reader.readAsDataURL(file) } /*! * OK这是上来执行的函数 */ function init() { __initFilterBackend(); __initCanvasWrapper(); __initCanvas(); } function loadData(dataMap) { if (dataMap == null) return; //图片的Base64编码。这个值肯定是有的 backgroundBase64 = dataMap['base64']; //加载背景图 fabric.util.loadImage(backgroundBase64, function(img) { //背景图 backgroundImage = new fabric.Image(img, imageAttrs); backgroundImageWidth = backgroundImage.width; backgroundImageHeight = backgroundImage.height; fCanvas.setWidth(backgroundImageWidth); fCanvas.setHeight(backgroundImageHeight); fCanvas.add(backgroundImage); }); } /*! * OK放大按钮触发 */ function zoomIn() { var oldZoom = zoomArray[zoomIndex]; ++zoomIndex; if (zoomIndex > (zoomArray.length - 1)) { zoomIndex = (zoomArray.length - 1); //直接return掉,因为zoomIndex > (zoomArray.length - 1)说明之前的zoomIndex已经是数组最后一个了 return; } __zoom(oldZoom); } /*! * OK缩小按钮触发 */ function zoomOut() { var oldZoom = zoomArray[zoomIndex]; --zoomIndex; if (zoomIndex < 0) { zoomIndex = 0; //直接return掉,因为zoomIndex < 0说明之前的zoomIndex已经是0了 return; } __zoom(oldZoom); } /*! * OK初始化Filter后端。使用Canvas2dFilterBackend,因为如果用new fabric.WebglFilterBackend()会报错 */ function __initFilterBackend() { fabric.filterBackend = new fabric.Canvas2dFilterBackend(); } /*! * OK初始化CanvasWrapper */ function __initCanvasWrapper() { //如果已经初始话好了就直接return if (canvasWrapper != null) return; var centerDiv = window.document.getElementById('center'); var width = centerDiv.offsetWidth; var height = centerDiv.offsetHeight; canvasWrapper = window.document.getElementById('canvasWrapper'); //这里通过style的width和height里设置加上px,并且这里我不设置style的maxWidth和maxHeight //因为如果设置了maxWidth和maxHeight后当我们对里面的Canvas进行缩小的时候,如果里面的Canvas变的太小,这样 canvasWrapper.style.width = width + 'px'; canvasWrapper.style.height = height + 'px'; } /*! * OK初始化Canvas */ function __initCanvas() { //如果已经初始化好了就直接return if (fCanvas != null) return; canvas = window.document.getElementById('canvas'); //这里不设置宽度和高度,通过导入图片的宽高来设置 fCanvas = new fabric.Canvas(canvas, canvasAttrs); //单纯设置canvas.backgroundColor内容无效,必须和下面的canvas.add一起才会起效果 fCanvas.backgroundColor = 'black'; } /*! * OK缩放的核心函数 */ function __zoom(oldZoom) { //记录一开始的left和top值 //var scrollLeft = canvasWrapper.scrollLeft; //var scrollTop = canvasWrapper.scrollTop; //以下是放大缩小操作,重新设置放大缩小的比例 var zoom = zoomArray[zoomIndex]; //在指定的点进行缩放 fCanvas.setZoom(zoom); //!Important,加入对Canvas大小的设置,这样可以让CanvasWrapper也能进行调整 fCanvas.setWidth(backgroundImageWidth*zoom); fCanvas.setHeight(backgroundImageHeight*zoom); //放大完后要重新设置transform //var vpt = fCanvas.viewportTransform; //console.log('-----' + vpt[4] + ' and ' + vpt[5]); //vpt[4] = 0; //vpt[5] = 0; //fCanvas.requestRenderAll(); /* oldleft newLeft * --------- = --------- * oldZoom newZoom */ //canvasWrapper.scrollLeft = (scrollLeft*zoom)/oldZoom; //canvasWrapper.scrollTop = (scrollTop*zoom)/oldZoom; } ```

Canvas如何自适应浏览器的大小

``` 从网上找的环形进度条代码如下，请问该如何改动才能让次进度条可以自适应屏幕的大小，最大分辨率为4k,最小为1600，谢谢~ <!DOCTYPE html> <html> <head> <meta charset="utf-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <title>canvas圆环进度</title> <link rel="stylesheet" href=""> <style> *{padding: 0; margin: 0; } .circle{width: 200px;height: 200px;margin: 0 auto;position: relative;} canvas{display: block;margin: 0;position: absolute;background: white;left: 0;top: 0;} #canvas_1{z-index: 1 } #canvas_2{z-index: 2; background: transparent;transform:rotate(-90deg); } </style> </head> <body> <div class="circle"> <canvas id="canvas_1" width="200" height="200"></canvas> <canvas id="canvas_2" width="200" height="200"></canvas> </div> <script> function inte(percent) { var canvas_1 = document.querySelector('#canvas_1'); var canvas_2 = document.querySelector('#canvas_2'); var ctx_1 = canvas_1.getContext('2d'); var ctx_2 = canvas_2.getContext('2d'); ctx_1.lineWidth = 10; ctx_1.strokeStyle = "#ccc"; //画底部的灰色圆环 ctx_1.beginPath(); ctx_1.arc(canvas_1.width / 2, canvas_1.height / 2, canvas_1.width / 2 - ctx_1.lineWidth / 2, 0, Math.PI * 2, false); ctx_1.closePath(); ctx_1.stroke(); if (percent < 0 || percent > 100) { throw new Error('percent must be between 0 and 100'); return } ctx_2.lineWidth = 10; ctx_2.strokeStyle = "#000"; var angle = 0; var timer; (function draw() { timer = requestAnimationFrame(draw); ctx_2.clearRect(0, 0, canvas_2.width, canvas_2.height) //百分比圆环 ctx_2.beginPath(); ctx_2.arc(canvas_2.width / 2, canvas_2.height / 2, canvas_2.width / 2 - ctx_2.lineWidth / 2, 0, angle * Math.PI / 180, false); angle++; var percentAge = parseInt((angle / 360) * 100) if (angle > (percent / 100 * 360)) { percentAge = percent window.cancelAnimationFrame(timer); }; ctx_2.stroke(); ctx_2.closePath(); ctx_2.save(); ctx_2.beginPath(); ctx_2.rotate(90 * Math.PI / 180) ctx_2.font = '30px Arial'; ctx_2.fillStyle = '#000'; var text = percentAge + '%'; ctx_2.fillText(text, 80, -90); var text_2=100-percentAge + 'timer'; ctx_2.fillText(text_2, 50, -50 ); ctx_2.closePath(); ctx_2.restore(); })() } window.onload = inte(100); </script> </body> </html> ```

如何动态更改在Fabric.js中创建的画布实例的位置

<div class="post-text" itemprop="text"> <p>I have make a canvas instance through Fabric.js.</p> <pre><code>var canInstance = new fabric.Canvas("drawCanvas"); </code></pre> <p>When I change its position after performing some calculation, it seems no change in canvas position.</p> <pre><code>canInstance.left = "250px"; canInstance.top = "200px"; </code></pre> <p>Is there any way to change position of canvas instance dynamically?</p> </div>

执行动画后再设置Canvas.Left值不起作用

一个很奇怪的问题，不知道大家遇到过没有： 1、在Canvas中直接设置元素位置，是有效果的，比如 Canvas.SetLeft(box, 50); 2、使用一个StoryBoard或直接BeginAnimation动画改变位置，也是有效果的（见test1_Click） 3、在使用动画改变元素位置后，再使用Canvas.SetLeft，纹丝不动！！？ XAML代码： ``` <Canvas> <Border x:Name="box" Width="100" Height="100" Background="Blue" Canvas.Left="150" Canvas.Top="90"/> <Button x:Name="test1" Content="test1" Height="27" Canvas.Left="441" Canvas.Top="17" Width="57" Click="test1_Click"/> <Button x:Name="test2" Content="test2" Height="27" Canvas.Left="441" Canvas.Top="57" Width="57" Click="test2_Click"/> </Canvas> ``` ![](http://img.bbs.csdn.net/upload/201604/15/1460712412_240933.png) 后台代码： ``` private void test1_Click(object sender, RoutedEventArgs e) { //((Storyboard)this.Resources["move"]).Begin(); KeyTime time_layout = KeyTime.FromTimeSpan(TimeSpan.FromMilliseconds(200)); Storyboard sb = new Storyboard(); DoubleAnimationUsingKeyFrames da = new DoubleAnimationUsingKeyFrames(); sb.Children.Add(da); Storyboard.SetTarget(da, box); Storyboard.SetTargetProperty(da, new PropertyPath("(Canvas.Left)")); EasingDoubleKeyFrame kf_left = new EasingDoubleKeyFrame { KeyTime = time_layout, Value = 200 }; da.KeyFrames.Add(kf_left); sb.Begin(); } private void test2_Click(object sender, RoutedEventArgs e) { Canvas.SetLeft(box, 50); } ```

canvas.toDataURL 处理图片时传递参数 quality 将图片压缩无效

图片转bace64方法如下 ``` function getBase64Image(img) { var dataURL; var canvas = document.createElement("canvas"); canvas.width = img.width; canvas.height = img.height; var ctx = canvas.getContext("2d"); ctx.drawImage(img, 0, 0, img.width, img.height); var ext = img.src.substring(img.src.lastIndexOf(".") + 1).toLowerCase(); dataURL = canvas.toDataURL("image/" + ext, 0.5); return dataURL; } ``` 在 canvas.toDataURL 时传 quality 参数，不管传几都没有体现出来压缩，传1图片出来是300k ，传0.1出来也是300k 求解

将canvas的画append给body充当背景图，但出现奇怪效果

这是初始的样子，我想要的效果是这颗心不随滚动条滚动 ![图片说明](https://img-ask.csdn.net/upload/201601/29/1454081612_798677.png) 当我拖动滚动条的时候，这颗心跟着移动了，但原位置固定了另一颗心。 ![图片说明](https://img-ask.csdn.net/upload/201601/29/1454081628_355408.png) 继续拖动滚动条， ![图片说明](https://img-ask.csdn.net/upload/201601/29/1454081665_887125.png) 由此可见，初始页面的心会随着滚动条移动，但同时有另一个心被固定在中间。我只想要让这个心被固定在中心。不会因为滚动条的移动而出现另一颗心。我通过JS建立canvas并将画设为背景图，JS代码如下： var canvas = document.createElement('canvas'); var canvas_width = $("body").css("width").split("p")[0]; var canvas_height = $("body").css("height").split("p")[0]; document.body.appendChild(canvas); canvas.id='homePageCanvas'; canvas.width = canvas_width; canvas.height = canvas_height; //canvas.style.backgroundColor = '#F9D1D4'; drawHeartCurve(); //画出了一个心 document.body.style.background = "url('"+homePageCanvas.toDataURL()+"')"; document.body.style['background-attachment']='fixed'; HTML/CSS只有一个很高的div让滚动条出现。 “<body> <div id="a" style="width:100px;height:3000px;background:yellow;position:absolute;"></div> </body>”

使用pdf.js将pdf转换为图像，然后将图像移动到服务器

<div class="post-text" itemprop="text"> <p>I've figured out the top section (and sorry for not being specific). But now I am using pdf.js to draw a canvas of a pdf and then convert that pdf to an image via:<br></p> <pre><code> var canvas = document.getElementsByTagName("canvas")[0]; image = new Image(); image.src = canvas.toDataURL("image/png"); document.body.appendChild(image); </code></pre> <p>But the problem is that the canvas is converted to an image before the canvas is done drawing, so the resulting image is missing parts. Canvases do not support <code>onload</code> and I don't want to use a static timer to wait for them to finish. Can anyone help me with this? Thanks.</p> <p>Full Code</p> <pre><code><html> <head> </head> <body> </body> <script src="https://cdn.jsdelivr.net/npm/pdfjs-dist@2.0.943/build/pdf.min.js"></script> <script type="text/javascript"> var currPage = 1; var numPages = 0; var thePDF = null; pdfjsLib.getDocument(<?php echo "'/bw_site/documents/newslettermailtemp/".$filename."'"; ?>).then(function(pdf) { thePDF = pdf; numPages = pdf.numPages; pdf.getPage( 1 ).then( handlePages ); }); function handlePages(page) { var viewport = page.getViewport( 2 ); var canvas = document.createElement( "canvas" ); var context = canvas.getContext('2d'); canvas.height = viewport.height; canvas.width = viewport.width; page.render({canvasContext: context, viewport: viewport}); document.body.appendChild( canvas ); currPage++; if ( thePDF !== null && currPage <= numPages ) { thePDF.getPage( currPage ).then( handlePages ); }else{canvasfunc();} } var image = []; function canvasfunc(){ for(var i = 0; i < document.getElementsByTagName("canvas").length; i++){ var canvases = document.getElementsByTagName("canvas")[i]; image[i] = new Image(); image[i].src = canvases.toDataURL("image/png"); document.body.appendChild(image[i]); } } </script> </html> </code></pre> </div>

如何让canvasjs的生成的chart在现有前端框架漂亮显示？

现象：现有前端框架插入canvasjs的生成的chart后，显示效果不好 code： ``` <div class="col-sm-12"> <div class="widget-box"> <div class="widget-header widget-header-flat widget-header-small"> </div> <div class="widget-body"> <div class="widget-main" id="widgetMain">  <div id="chartContainer"></div> </div> </div> </div> ``` **显示效果**：见图片 ![图片说明](https://img-ask.csdn.net/upload/201703/31/1490932351_617324.jpg) canvasjs：画各种统计图形的JS canvasjs官网：http://canvasjs.com/javascript-charts/ canvasjs：官网提供的例子（canvasjs的生成的chart直接放在html的body里面） ``` <!DOCTYPE HTML> <html> <head> <script type="text/javascript"> window.onload = function() { var chart = new CanvasJS.Chart("chartContainer", { title: { text: "Line Chart" }, axisX: { interval: 10 }, data: [{ type: "line", dataPoints: [ { x: 10, y: 45 }, { x: 20, y: 14 }, { x: 30, y: 20 }, { x: 40, y: 60 }, { x: 50, y: 50 }, { x: 60, y: 80 }, { x: 70, y: 40 }, { x: 80, y: 60 }, { x: 90, y: 10 }, { x: 100, y: 50 }, { x: 110, y: 40 }, { x: 120, y: 14 }, { x: 130, y: 70 }, { x: 140, y: 40 }, { x: 150, y: 90 }, ] }] }); chart.render(); } </script> <script src="../../canvasjs.min.js"></script> <title>CanvasJS Example</title> </head> <body> <div id="chartContainer" style="height: 400px; width: 100%;"></div> </body> </html> ```

html2canvas+Canvas2Image在移动端出现的问题

移动端想要实现长按保存图片的功能，用html2canvas+canvas2image来实现，，PC端能正常下载，但是在移动端下载的文件没有后缀名，而且下载失败，下面是代码和图片 ![图片说明](https://img-ask.csdn.net/upload/201905/14/1557813395_266950.jpg) ``` let dom = $(".dom").get(0); // 调用html2canvas插件 jsShot.html2canvas(dom).then(function (canvas) { // canvas宽度 var canvasWidth = canvas.width; // canvas高度 var canvasHeight = canvas.height; var img = jsShot.Canvas2Image.convertToImage(canvas, canvasWidth, canvasHeight); let type = $('#sel').val(); //图片类型 let w = $('#imgW').val(); //图片宽度 let h = $('#imgH').val(); //图片高度 let f = $('#imgFileName').val(); //图片文件名 w = (w === '') ? canvasWidth : w; //判断输入宽高是否为空，为空时保持原来的值 h = (h === '') ? canvasHeight : h; // 调用Canvas2Image插件 jsShot.Canvas2Image.saveAsImage(canvas, w, h, type, f); // var dataString = canvas.toDataURL("image.png/png"); // var link = document.createElement("a"); // link.download = 'image'; // link.href = dataString; // link.click(); // that.$nextTick(()=>{ // that.screenShow=false // }) }); ```

Fabricjs：在画布上更新SVG

<div class="post-text" itemprop="text"> <p>I am using fabricjs 1.6.4 and I want to update the existing svg with the new one. I am using this code to add the new SVG:</p> <pre><code>fabric.loadSVGFromURL(url, function (objects, options) { var image = fabric.util.groupSVGElements(objects, options); image.name = 'sticker'; canvas.add(image); image.scaleToHeight(100); image.center(); image['selectable'] = false; image['evented'] = false; image.setCoords(); canvas.renderAll(); }); } </code></pre> <p>How can I replace the existing SVG with the new one. I have done something related to this in the image but I can not replicate in SVG. Here is the code for image:</p> <pre><code>$scope.fillImage = function(src) { fabric.Image.fromURL(src, function(img) { var object = canvas.getActiveObject(); object._element.src = src; canvas.renderAll(); }); } </code></pre> <p>I need something like this. Please help.</p> </div>

android 清理画布canvas后背景变黑色可以设置颜色但不能变得透明了怎么才能变透明？

我分别用下面两个方法清理画布 1、 canvas.drawColor(colorAlpha, PorterDuff.Mode.CLEAR); 2、 Paint p = new Paint(); // //清屏 // p.setXfermode(new PorterDuffXfermode(Mode.CLEAR)); // canvas.drawPaint(p); // p.setXfermode(new PorterDuffXfermode(Mode.SRC_IN)); 背景变成黑色怎么回到透明

html2canvas 生成canvas 后转成图片报错

``` html2canvas($("#bodydiv"), { onrendered: function (canvas) { document.body.appendChild(canvas); convertCanvasToImage(document.getElementsByTagName("canvas")); } }); 生成后用 function convertCanvasToImage(canvas) { var image = new Image(); image.src = canvas.toDataURL("image/png"); return image; } ``` 报 canvas.toDataURL is not a function 这个错这个生成的canvas原本在页面里没有的如果我直接写一个空的canvas 就能获取到有么有道友遇到过

canvas ie8 报错： excanvas.js参数无效

新手最近弄一个抽奖转盘，想通过android webview加载html5的页面，但是运行的时候总是显示有问题（点击按钮开始没反应等）改好的html模板，在谷歌等浏览器测试正常，ie8测试canvas显示不了；百度后加载了 excanvas.js还是有问题体![图片说明](https://img-ask.csdn.net/upload/201608/29/1472451830_82923.jpg)

pdf.js在requirejs中使用，workerSrc和getDocument浏览器总报错？

在main.js中引入pdf.js 'pdfJs': 'plugins/pdfjs/build/pdf', 在页面中 define(['pdfJs'], function (pdfjs) {}) 下面是使用 pdfjs.workerSrc =STATIC_CTX + '/static/scripts/plugins/pdfjs/build/pdf.worker.js'; var loadingTask = pdfjs.getDocument({ url: src, cMapUrl: STATIC_CTX + '/static/scripts/plugins/pdfjs/web/cmaps/', cMapPacked: true }); loadingTask.promise.then(function(pdf) { console.log('PDF loaded'); var pageNumber = 1; pdf.getPage(pageNumber).then(function(page) { console.log('Page loaded'); var scale = 1.5; var viewport = page.getViewport(scale); var canvas = document.getElementById('the-canvas'); var context = canvas.getContext('2d'); canvas.height = viewport.height; canvas.width = viewport.width; var renderContext = { canvasContext: context, viewport: viewport }; var renderTask = page.render(renderContext); renderTask.then(function () { console.log('Page rendered'); }); }); 最后运行在浏览器中就报错 Uncaught TypeError: Cannot read property 'getDocument' of undefined

IE8及以下不兼容html2canvas问题

已经引入Html5.js 没什么用。 html2canvas($('.j_rtss'), { onrendered: function(canvas) { $('#vsave').attr( 'href' , canvas.toDataURL() ) ; $('#vsave').attr( 'download' , '1.png' ) ; document.getElementById("vsave").click(); } }); 以上代码不会被执行，其他浏览器测试正常，

Fabricjs：显示横幅的预览

<div class="post-text" itemprop="text"> <p>I am using fabricjs 1.5 and I am stuck on 1 thing. I want to show the preview of the canvas to the user on click of button and I can not come up with a proper solution. Some things that crossed my mind are:</p> <ul> <li><p>Save the current canvas state and then render it on the other canvas</p></li> <li><p>Create a temporary image save function and then show this image</p></li> </ul> <p>But I want to know if there is any specific function in the fabricjs that can help me achieve this. I did some R&D and could not find anything and hence I have not tried anything.</p> </div>

#Leaflet#用Chart.js在JavaScript生成的canvas里面绘制饼图获取ElementID后出错

一个基于Leaflet开发的小小小项目问题大概只这样的：首先是我用L.control()生成一个控件(info)，通过.update()方法对控件进行更新。在.update()中我创建了一个新的canvas元素，之后通过document.getElementById()获取该元素，并使用Chart.js库创建一个饼图。在调用Chart.js库的时候就报错了（TypeError: item is null）。 ``` 相关资源： <script src="https://cdnjs.cloudflare.com/ajax/libs/Chart.js/2.8.0/Chart.bundle.js"></script> <style> #map{ height: 70% } .info { padding: 16px 10px; font: 14px/16px Arial, Helvetica, sans-serif; background: white; background: rgba(255,255,255,0.8); box-shadow: 0 0 15px rgba(0,0,0,0.2); border-radius: 5px; } .info h4 { margin: 0 0 5px; color: 'white'; } </style> ``` 报错内容如下： TypeError: item is nullChart.bundle.js:6904:14 acquireContext https://cdnjs.cloudflare.com/ajax/libs/Chart.js/2.8.0/Chart.bundle.js:6904 construct https://cdnjs.cloudflare.com/ajax/libs/Chart.js/2.8.0/Chart.bundle.js:8423 Chart https://cdnjs.cloudflare.com/ajax/libs/Chart.js/2.8.0/Chart.bundle.js:8410 update http://127.0.0.1:5500/static/js/load_tiff.js:85 onAdd http://127.0.0.1:5500/static/js/load_tiff.js:76 addTo http://127.0.0.1:5500/static/js/leaflet/leaflet.js:5 <anonymous> http://127.0.0.1:5500/static/js/load_tiff.js:90 ``` 相关代码如下： var randomScalingFactor = function() { return Math.round(Math.random() * 100); }; var config = { type: 'pie', data: { datasets: [{ data: [ randomScalingFactor(), randomScalingFactor(), randomScalingFactor(), randomScalingFactor(), randomScalingFactor(), ], backgroundColor: [ "rgba(230, 14, 14, 1)", "rgba(230, 122, 14, 1)", "rgba(230, 230, 14, 1)", "rgba(122, 230, 14, 1)", "rgba(14, 122, 230, 1)", ], label: 'Dataset 1' }], labels: [ 'Red', 'Orange', 'Yellow', 'Green', 'Blue' ] }, options: { responsive: true } }; var info = L.control(); info.onAdd = function(mymap) { this._div = L.DomUtil.create('div', 'info'); this.update(); return this._div; }; info.update = function() { var content = '<h4>Statistic Info</h4>' + '<br />'; content += '<canvas id="myChart" width="10" height="10"></canvas>'; this._div.innerHTML = content; var piechart = new Chart(document.getElementById('myChart'),config) }; info.addTo(mymap); ```

大学四年自学走来，这些私藏的实用工具/学习网站我贡献出来了

大学四年，看课本是不可能一直看课本的了，对于学习，特别是自学，善于搜索网上的一些资源来辅助，还是非常有必要的，下面我就把这几年私藏的各种资源，网站贡献出来给你们。主要有：电子书搜索、实用工具、在线视频学习网站、非视频学习网站、软件下载、面试/求职必备网站。注意：文中提到的所有资源，文末我都给你整理好了，你们只管拿去，如果觉得不错，转发、分享就是最大的支持了。一、电子书搜索对于大部分程序员...

在中国程序员是青春饭吗？

今年，我也32了，为了不给大家误导，咨询了猎头、圈内好友，以及年过35岁的几位老程序员……舍了老脸去揭人家伤疤……希望能给大家以帮助，记得帮我点赞哦。目录：你以为的人生一次又一次的伤害猎头界的真相如何应对互联网行业的「中年危机」一、你以为的人生刚入行时，拿着傲人的工资，想着好好干，以为我们的人生是这样的：等真到了那一天，你会发现，你的人生很可能是这样的： ...

程序员请照顾好自己，周末病魔差点一套带走我。

程序员在一个周末的时间，得了重病，差点当场去世，还好及时挽救回来了。

技术大佬：我去，你写的 switch 语句也太老土了吧

昨天早上通过远程的方式 review 了两名新来同事的代码，大部分代码都写得很漂亮，严谨的同时注释也很到位，这令我非常满意。但当我看到他们当中有一个人写的 switch 语句时，还是忍不住破口大骂：“我擦，小王，你丫写的 switch 语句也太老土了吧！” 来看看小王写的代码吧，看完不要骂我装逼啊。 private static String createPlayer(PlayerTypes p...

和黑客斗争的 6 天！

互联网公司工作，很难避免不和黑客们打交道，我呆过的两家互联网公司，几乎每月每天每分钟都有黑客在公司网站上扫描。有的是寻找 Sql 注入的缺口，有的是寻找线上服务器可能存在的漏洞，大部分都...

点沙成金：英特尔芯片制造全过程揭密

“亚马逊丛林里的蝴蝶扇动几下翅膀就可能引起两周后美国德州的一次飓风……” 这句人人皆知的话最初用来描述非线性系统中微小参数的变化所引起的系统极大变化。而在更长的时间尺度内，我们所生活的这个世界就是这样一个异常复杂的非线性系统…… 水泥、穹顶、透视——关于时间与技艺的蝴蝶效应公元前3000年，古埃及人将尼罗河中挖出的泥浆与纳特龙盐湖中的矿物盐混合，再掺入煅烧石灰石制成的石灰，由此得来了人...

讲一个程序员如何副业月赚三万的真实故事

loonggg读完需要3分钟速读仅需 1 分钟大家好，我是你们的校长。我之前讲过，这年头，只要肯动脑，肯行动，程序员凭借自己的技术，赚钱的方式还是有很多种的。仅仅靠在公司出卖自己的劳动时...

上班一个月，后悔当初着急入职的选择了

最近有个老铁，告诉我说，上班一个月，后悔当初着急入职现在公司了。他之前在美图做手机研发，今年美图那边今年也有一波组织优化调整，他是其中一个，在协商离职后，当时捉急找工作上班，因为有房贷供着，不能没有收入来源。所以匆忙选了一家公司，实际上是一个大型外包公司，主要派遣给其他手机厂商做外包项目。**当时承诺待遇还不错，所以就立马入职去上班了。但是后面入职后，发现薪酬待遇这块并不是HR所说那样，那个HR自...

女程序员，为什么比男程序员少？？？

昨天看到一档综艺节目，讨论了两个话题：（1）中国学生的数学成绩，平均下来看，会比国外好？为什么？（2）男生的数学成绩，平均下来看，会比女生好？为什么？同时，我又联想到了一个技术圈经常讨...

副业收入是我做程序媛的3倍，工作外的B面人生是怎样的？

提到“程序员”，多数人脑海里首先想到的大约是：为人木讷、薪水超高、工作枯燥…… 然而，当离开工作岗位，撕去层层标签，脱下“程序员”这身外套，有的人生动又有趣，马上展现出了完全不同的A/B面人生！不论是简单的爱好，还是正经的副业，他们都干得同样出色。偶尔，还能和程序员的特质结合，产生奇妙的“化学反应”。 @Charlotte：平日素颜示人，周末美妆博主大家都以为程序媛也个个不修边幅，但我们也许...

MySQL数据库面试题（2020最新版）

文章目录数据库基础知识为什么要使用数据库什么是SQL？什么是MySQL?数据库三大范式是什么mysql有关权限的表都有哪几个MySQL的binlog有有几种录入格式？分别有什么区别？数据类型mysql有哪些数据类型引擎MySQL存储引擎MyISAM与InnoDB区别MyISAM索引与InnoDB索引的区别？InnoDB引擎的4大特性存储引擎选择索引什么是索引？索引有哪些优缺点？索引使用场景（重点）...

如果你是老板，你会不会踢了这样的员工？

有个好朋友ZS，是技术总监，昨天问我：“有一个老下属，跟了我很多年，做事勤勤恳恳，主动性也很好。但随着公司的发展，他的进步速度，跟不上团队的步伐了，有点...

我入职阿里后，才知道原来简历这么写

私下里，有不少读者问我：“二哥，如何才能写出一份专业的技术简历呢？我总感觉自己写的简历太烂了，所以投了无数份，都石沉大海了。”说实话，我自己好多年没有写过简历了，但我认识的一个同行，他在阿里，给我说了一些他当年写简历的方法论，我感觉太牛逼了，实在是忍不住，就分享了出来，希望能够帮助到你。 01、简历的本质作为简历的撰写者，你必须要搞清楚一点，简历的本质是什么，它就是为了来销售你的价值主张的。往深...

我说我不会算法，阿里把我挂了。

不说了，字节跳动也反手把我挂了。

优雅的替换if-else语句

场景日常开发，if-else语句写的不少吧？？当逻辑分支非常多的时候，if-else套了一层又一层，虽然业务功能倒是实现了，但是看起来是真的很不优雅，尤其是对于我这种有强迫症的程序"猿"，看到这么多if-else，脑袋瓜子就嗡嗡的，总想着解锁新姿势：干掉过多的if-else！！！本文将介绍三板斧手段：优先判断条件，条件不满足的，逻辑及时中断返回；采用策略模式+工厂模式；结合注解，锦...

离职半年了，老东家又发 offer，回不回？

有小伙伴问松哥这个问题，他在上海某公司，在离职了几个月后，前公司的领导联系到他，希望他能够返聘回去，他很纠结要不要回去？俗话说好马不吃回头草，但是这个小伙伴既然感到纠结了，我觉得至少说明了两个问题：1.曾经的公司还不错；2.现在的日子也不是很如意。否则应该就不会纠结了。老实说，松哥之前也有过类似的经历，今天就来和小伙伴们聊聊回头草到底吃不吃。首先一个基本观点，就是离职了也没必要和老东家弄的苦...

为什么你不想学习？只想玩？人是如何一步一步废掉的

不知道是不是只有我这样子，还是你们也有过类似的经历。上学的时候总有很多光辉历史，学年名列前茅，或者单科目大佬，但是虽然慢慢地长大了，你开始懈怠了，开始废掉了。。。什么？你说不知道具体的情况是怎么样的？我来告诉你：你常常潜意识里或者心理觉得，自己真正的生活或者奋斗还没有开始。总是幻想着自己还拥有大把时间，还有无限的可能，自己还能逆风翻盘，只不是自己还没开始罢了，自己以后肯定会变得特别厉害...

男生更看重女生的身材脸蛋，还是思想？

往往，我们看不进去大段大段的逻辑。深刻的哲理，往往短而精悍，一阵见血。问：产品经理挺漂亮的，有点心动，但不知道合不合得来。男生更看重女生的身材脸蛋，还是...

为什么程序员做外包会被瞧不起？

二哥，有个事想询问下您的意见，您觉得应届生值得去外包吗？公司虽然挺大的，中xx，但待遇感觉挺低，马上要报到，挺纠结的。

当HR压你价，说你只值7K，你该怎么回答？

当HR压你价，说你只值7K时，你可以流畅地回答，记住，是流畅，不能犹豫。礼貌地说：“7K是吗？了解了。嗯~其实我对贵司的面试官印象很好。只不过，现在我的手头上已经有一份11K的offer。来面试，主要也是自己对贵司挺有兴趣的，所以过来看看……”（未完）这段话主要是陪HR互诈的同时，从公司兴趣，公司职员印象上，都给予对方正面的肯定，既能提升HR的好感度，又能让谈判气氛融洽，为后面的发挥留足空间。...

面试：第十六章：Java中级开发（16k）

HashMap底层实现原理，红黑树，B+树，B树的结构原理 Spring的AOP和IOC是什么？它们常见的使用场景有哪些？Spring事务，事务的属性，传播行为，数据库隔离级别 Spring和SpringMVC，MyBatis以及SpringBoot的注解分别有哪些？SpringMVC的工作原理，SpringBoot框架的优点，MyBatis框架的优点 SpringCould组件有哪些，他们...

面试阿里p7，被按在地上摩擦，鬼知道我经历了什么？

面试阿里p7被问到的问题(当时我只知道第一个)：@Conditional是做什么的?@Conditional多个条件是什么逻辑关系？条件判断在什么时候执...

你打算用Java 8一辈子都不打算升级到Java 14，真香

我们程序员应该抱着尝鲜、猎奇的心态，否则就容易固步自封，技术停滞不前。

无代码时代来临，程序员如何保住饭碗？

编程语言层出不穷，从最初的机器语言到如今2500种以上的高级语言，程序员们大呼“学到头秃”。程序员一边面临编程语言不断推陈出新，一边面临由于许多代码已存在，程序员编写新应用程序时存在重复“搬砖”的现象。无代码/低代码编程应运而生。无代码/低代码是一种创建应用的方法，它可以让开发者使用最少的编码知识来快速开发应用程序。开发者通过图形界面中，可视化建模来组装和配置应用程序。这样一来，开发者直...

面试了一个 31 岁程序员，让我有所触动，30岁以上的程序员该何去何从？

最近面试了一个31岁8年经验的程序猿，让我有点感慨，大龄程序猿该何去何从。

大三实习生，字节跳动面经分享，已拿Offer

说实话，自己的算法，我一个不会，太难了吧

程序员垃圾简历长什么样？

已经连续五年参加大厂校招、社招的技术面试工作，简历看的不下于万份这篇文章会用实例告诉你，什么是差的程序员简历！疫情快要结束了，各个公司也都开始春招了，作为即将红遍大江南北的新晋UP主，那当然要为小伙伴们做点事（手动狗头）。就在公众号里公开征简历，义务帮大家看，并一一点评。《启舰：春招在即，义务帮大家看看简历吧》一石激起千层浪，三天收到两百多封简历。花光了两个星期的所有空闲时...

《经典算法案例》01-08：如何使用质数设计扫雷（Minesweeper）游戏

我们都玩过Windows操作系统中的经典游戏扫雷（Minesweeper），如果把质数当作一颗雷，那么，表格中红色的数字哪些是雷（质数）？您能找出多少个呢？文中用列表的方式罗列了10000以内的自然数、质数（素数），6的倍数等，方便大家观察质数的分布规律及特性，以便对算法求解有指导意义。另外，判断质数是初学算法，理解算法重要性的一个非常好的案例。

《Oracle Java SE编程自学与面试指南》最佳学习路线图（2020最新版）

正确选择比瞎努力更重要！

一文带你入门Java Stream流，太强了

两个星期以前，就有读者强烈要求我写一篇 Java Stream 流的文章，我说市面上不是已经有很多了吗，结果你猜他怎么说：“就想看你写的啊！”你看你看，多么苍白的喜欢啊。那就“勉为其难”写一篇吧，嘻嘻。单从“Stream”这个单词上来看，它似乎和 java.io 包下的 InputStream 和 OutputStream 有些关系。实际上呢，没毛关系。Java 8 新增的 Stream 是为...

穷在人世中少你左右我想我连什么价值也没有

支付宝加好友偷能量挖