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>

1个回答

你这个进度条是圆形的,只能选取高度或者宽度最小值进行设置,自己动态设置canvas的width/height为其中的最大值

   <div class="circle" id="circle">
        <canvas id="canvas_1" width="200" height="200"></canvas>
        <canvas id="canvas_2" width="200" height="200"></canvas>
    </div>
    <script>
        var css1Compat = document.compatMode == 'CSS1Compat', target = css1Compat ? 'documentElement' : 'body',
            clientHeight = document[target].clientHeight, clientWidth = document[target].clientWidth;
        var m = Math.min(clientWidth, clientHeight);
        document.getElementById('circle').style.height = document.getElementById('circle').style.width =
        document.getElementById('canvas_1').style.height = document.getElementById('canvas_1').style.width =
        document.getElementById('canvas_2').style.height = document.getElementById('canvas_2').style.width = m + 'px';

//.............原来的代码,就加上面重置宽度高度的,circle那个div加id
Csdn user default icon
上传中...
上传图片
插入图片
抄袭、复制答案,以达到刷声望分或其他目的的行为,在CSDN问答是严格禁止的,一经发现立刻封号。是时候展现真正的技术了!
其他相关推荐
html2canvas在360浏览器兼容模式下报错问题

需求是将页面上的一张图表做前端导出,我用到了两个插件,一个是html2canvas进行截图,还有一个是jspdf生成pdf文件并且保存到本地 firefox和chrome都已经通过测试了,360的兼容模式下不能正常跑。 代码跑到这里的时候会报错: html2canvas($("#vm0"), { onrendered: function (canvas) { $(canvas).attr({"style":"margin-top:10px;","id":"vm0_save"}) $("#realchart").append(canvas); } }); 刚开始浏览器控制台抛出这个错误: ![图片说明](https://img-ask.csdn.net/upload/201706/19/1497850918_99930.png) 下了一个es6-promise依赖包,然后在html2canvas.js最上面加了一句: var Promise = require('es6-promise').Promise; 这个报错就不再出现了,但是随之而来的是下面这个报错: ![图片说明](https://img-ask.csdn.net/upload/201706/19/1497851219_728316.png) 然后就没有什么头绪解决了,有遇到过这个问题的大神吗? 另外发现html2canvas的坑挺多的,有没有可以替代它的插件

canvas 的 drawImages 是不是在手机浏览器上有不兼容的情况?该怎么处理

我网页写的,测试的没问题。用手机的浏览器测试,感觉有点问题. 就是感觉drawImages没起作用的一样的,请问怎么处理 部分代码: ``` var b = document.getElementById("canvas2").getContext("2d"); var bobject = document.getElementById("canvas2"); var image = document.getElementById("img1"); b.drawImage(image, 0, 0, _("img1").style.width.replace("px", ""), _("img1").style.height.replace("px", "")); alert($("#canvas2")[0].toDataURL("image/png")); ``` 最后一个alert是能alert值出来的,是base64格式。但是在手机浏览器上canvas2没有图画出来,请问怎么解决,谷歌浏览器使用正常。

canvas库fabric.js如何设置背景自适应

fabric.js 设置背景的方法,这样确实可以设置 canvas 背景图 var canvas = new fabric.Canvas('canvasx'); canvas.setBackgroundImage('../img/zxzx.jpg', canvas.renderAll.bind(canvas)); 如果图像太大的话,那么背景只会显示一部分图像 请问各位请问各位大神,如何用 fabric.js 设置背景图的 高和宽呢? 使之自动适应canvas的大小

用<canvas>标签绘制图形浏览器显示不出来

代码如下: ``` <!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title></title> <script type="application/javascript"> function draw(){ var canvas=document.getElementById('canvas'); if(canvas.getContext){ var ctx=canvas.getContext("2d"); for(var i=0;i<2;i++){ for(var j=0;j<3;j++){ ctx.beginPath(); var x=10+j*30; var y=10+i*30; var radius=10; var stratAngle=0; var endAngle=Math.PI+(Math.PI*j)/2; var anticlockwise=false; ctx.arc(x,y,raidus,stratAngle,endAngle,anticlockwise); ctx.stroke(); } } } } </script> </head> <body onload="draw()"> <canvas id="canvas" width="200" height="200"></canvas> </body> </html> ``` 我还找了另一个例子,照着敲的也显示不出来

html2Canvas 在ios+4g+微信内置浏览器错误

开发了一个webapp,用到了html2canvas。 测试下来: ios、Android + WiFi + 浏览器/微信= 正常 Android + 4G + 浏览器/微信 = 正常 ios + 4G + 浏览器 = 正常 只有 ios + 4G + 微信 = 错误 可能是什么问题呢?微信浏览器有什么针对ios 4g的设置吗?

canvas实时视频捕获,在safari等浏览器不支持,有没有替代方案?

``` var stream=canvas.captureStream(); ``` canvas实时视频捕获,在safari等浏览器不支持,有没有替代方案? ``` record = new MediaRecorder(stream, {mimeType:'video/webm;codecs=vp9'}); record.ondataavailable = e => { list.push(e.data); } record.start(10); ``` 想要通过实时捕获画布,录制成视频。并且发现mediaRecord在safari也不支持,有没有解决此情况的方案?

移动端画布自适应屏幕,怎么使用rem

移动端画布屏幕自适应,有实例最好。................

在微信内置浏览器中用canvas的drawImage方法进行两张图片的拼合的相关问题

需求是用户选择相框,再上传一张图片并剪裁,将剪裁的图片和相框拼接,都是在前台实现功能,剪裁图片是使用copperjs实现的,获取到剪裁图片的blob和base64,在获取选中相框的src并转换为bolb和base64,然后新建一个canvas对象 在里面拼合两张图片,这时候会出现以下情况 1.剪裁图片预览是纯黑色的图 2.剪裁图片预览成灰色,且图片内容并排重复,夹杂雪花效果 3.相框预览是白色, 4.相框拼接不到剪裁图片上 请问前辈有没有什么好的解决方案,会不会是因为drawimage导致微信浏览器崩溃?还是跟安卓机型有关? 这套代码在iphone和pc浏览器中运行都是ok的

bitmap 和canvas的大小关系?paintbox 和canvas 的大小关系?

求详细答案,最好能回答三者的关系。谢谢。![图片说明](http://forum.csdn.net/PointForum/ui/scripts/csdn/Plugin/001/face/9.gif)![图片说明](http://forum.csdn.net/PointForum/ui/scripts/csdn/Plugin/001/face/1.gif)![图片说明](http://forum.csdn.net/PointForum/ui/scripts/csdn/Plugin/001/face/1.gif)

手机页面利用canvas压缩图片再上传服务器,谷歌和微信内置浏览器可以华为自带浏览器却不行

如题,先利用canvas压缩图片,再通过ajaxFileUpload等把图片传到服务器,canvas.toDataURL("image/jpeg", 0.2);明明是jpeg了,在谷歌和微信内置浏览器也可以实现,但是用华为机自带的浏览器测试时,却强制性的变成png,压缩的图片也有很大缺失,变成一大块黑色。求高手指点。

在DREAMWEAVER中用canvas画的圆为何在浏览器中不显示

<!doctype html> <html> <head> <meta charset="utf-8"> <title>绘制圆形</title> </head> <body> <canvas id="yuan" width="800" height="600"></canvas> <script type="text/javascript"> var canvas=document.getElementById('yuan'); var ctx=canvas.getContext('2d'); ctx.beginPath(); ctx.arc(150,150,75,0,2*Math.PI,flase); ctx.closePath(); ctx.fillStyle='#EA6179'; ctx.fill(); </script> </body> </html>

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="fabric.js"></script--> <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转成img格式的图片

大家好,如何解决安卓机微信内置浏览器无法保存canvas转成img格式的图片 (长按图片,无法发送给朋友、保存到手机,甚至无法收藏)的问题,我有想过将canvas转成img格式的图片传回服务器端进行处理,保存再显示出来,但data:image/png;base64的长度太长了,没成功。 有什么可以解决这问题??

html中margin的自适应问题

``` <!DOCTYPE html> <html lang="zh-CN"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <meta http-equiv="X-UA-Compatible" content="ie=edge"> <title>页面练习</title> <style> *{margin:0;padding:0;} img{display:block;} ul li{list-style:none;} a{text-decoration:none;color:#333333;} a:hover{color:#84D4FF;text-decoration:underline;} h1,h2,h3,h4,h5,h6{font-size: 14px;font-family:微软雅黑;font-weight:normal;} #main{width:278px;border:1px #dbe2ea solid;margin:200px;} #title1{height:36px;border-bottom:1px #dbe2ea solid;line-height: 36px;margin:0 auto;} </style> </head> <body> <div id="main"> <h1 id="title1"> <a href="#">移动标题</a> </h1> </div> </body> </html> ``` 明明我在#title中设置了margin:0 auto;左右自适应了,但移动标题却不能居中显示?

canvas绘制视频在x5内核中不显示

项目需求,在canvas中实时绘制video中的视频。百度了方法是同伙定时器实时的绘制video的每一帧画面。 在测试时发现在x5内核中canvas无法显示所绘制的画面,在手机自带浏览器,和PC端中则正常使用。有没有兄弟碰到过类似的请求支援! ```js var videoObj = $("#video")[0]; var ctx=$("#canvas")[0].getContext('2d'); var fps = 1000/30; var timer = null; timer=window.setInterval(function() { ctx.drawImage(videoObj,-85,-150,170,300); },fps); ```

移动端 HTML5 CANVAS 兼容性问题

目前在做微信公众平台 ,使用到canvas绘制图片,在某些设备上出现偶尔无法绘制的问题。 目前测试出现在 oppo R8007 小米s1上,代码是最最简单的代码,比如绘制一行字,画矩形等,均出现间歇性的无法绘制的问题。 不知道是代码哪里没有做对,还是怎样?请教各位大神,有没有什么解决方案。 <!DOCTYPE HTML> <html> <head> <title>测试canvas</title> <meta http-equiv="Content-Type" content="text/html; charset=UTF-8"> <body> <canvas id="myCanvas" ></canvas> <script type="text/javascript"> function draw () { var canvas = document.getElementById('myCanvas'); canvas.width = 640; canvas.height = 600; var context = canvas.getContext("2d"); context.fillStyle = "red"; context.fillRect(0, 0, 640, 300); }; draw(); </script> </body> </html> ``` ```

jcanvas如何控制不规则多边形在canvas大小范围内移动

利用this.$canvas.drawPath画一个不规则多边形,如何写一个function控制其移动范围

360安全浏览器兼容问题

项目部署好之后,在360安全浏览器上运行,编辑完一个模块后点击保存按钮时,浏览器提示“是否要保存此文件,或者要联机运行此json文件”,该怎么解决啊,急等。

写了一个在线下载功能网页在电脑端没问题,为什么用手机浏览器就无法成功下载?

写了一个简易网页,功能时可以在线生成明信片并下载(基于html2canvas.js),在电脑端没问题,为什么用手机浏览器就无法成功下载?

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

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

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

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

我以为我学懂了数据结构,直到看了这个导图才发现,我错了

数据结构与算法思维导图

String s = new String(" a ") 到底产生几个对象?

老生常谈的一个梗,到2020了还在争论,你们一天天的,哎哎哎,我不是针对你一个,我是说在座的各位都是人才! 上图红色的这3个箭头,对于通过new产生一个字符串(”宜春”)时,会先去常量池中查找是否已经有了”宜春”对象,如果没有则在常量池中创建一个此字符串对象,然后堆中再创建一个常量池中此”宜春”对象的拷贝对象。 也就是说准确答案是产生了一个或两个对象,如果常量池中原来没有 ”宜春” ,就是两个。...

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

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

Linux面试题(2020最新版)

文章目录Linux 概述什么是LinuxUnix和Linux有什么区别?什么是 Linux 内核?Linux的基本组件是什么?Linux 的体系结构BASH和DOS之间的基本区别是什么?Linux 开机启动过程?Linux系统缺省的运行级别?Linux 使用的进程间通信方式?Linux 有哪些系统日志文件?Linux系统安装多个桌面环境有帮助吗?什么是交换空间?什么是root帐户什么是LILO?什...

将一个接口响应时间从2s优化到 200ms以内的一个案例

一、背景 在开发联调阶段发现一个接口的响应时间特别长,经常超时,囧… 本文讲讲是如何定位到性能瓶颈以及修改的思路,将该接口从 2 s 左右优化到 200ms 以内 。 二、步骤 2.1 定位 定位性能瓶颈有两个思路,一个是通过工具去监控,一个是通过经验去猜想。 2.1.1 工具监控 就工具而言,推荐使用 arthas ,用到的是 trace 命令 具体安装步骤很简单,大家自行研究。 我的使用步骤是...

学历低,无法胜任工作,大佬告诉你应该怎么做

微信上收到一位读者小涛的留言,大致的意思是自己只有高中学历,经过培训后找到了一份工作,但很难胜任,考虑要不要辞职找一份他能力可以胜任的实习工作。下面是他留言的一部分内容: 二哥,我是 2016 年高中毕业的,考上了大学但没去成,主要是因为当时家里经济条件不太允许。 打工了三年后想学一门技术,就去培训了。培训的学校比较垃圾,现在非常后悔没去正规一点的机构培训。 去年 11 月份来北京找到了一份工...

JVM内存结构和Java内存模型别再傻傻分不清了

JVM内存结构和Java内存模型都是面试的热点问题,名字看感觉都差不多,网上有些博客也都把这两个概念混着用,实际上他们之间差别还是挺大的。 通俗点说,JVM内存结构是与JVM的内部存储结构相关,而Java内存模型是与多线程编程相关,本文针对这两个总是被混用的概念展开讲解。 JVM内存结构 JVM构成 说到JVM内存结构,就不会只是说内存结构的5个分区,而是会延展到整个JVM相关的问题,所以先了解下

和黑客斗争的 6 天!

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

Google 与微软的浏览器之争

浏览器再现“神仙打架”。整理 | 屠敏头图 | CSDN 下载自东方 IC出品 | CSDN(ID:CSDNnews)从 IE 到 Chrome,再从 Chrome 到 Edge,微软与...

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

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

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

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

女程序员,为什么比男程序员少???

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

搜狗输入法也在挑战国人的智商!

故事总是一个接着一个到来...上周写完《鲁大师已经彻底沦为一款垃圾流氓软件!》这篇文章之后,鲁大师的市场工作人员就找到了我,希望把这篇文章删除掉。经过一番沟通我先把这篇文章从公号中删除了...

85后蒋凡:28岁实现财务自由、34岁成为阿里万亿电商帝国双掌门,他的人生底层逻辑是什么?...

蒋凡是何许人也? 2017年12月27日,在入职4年时间里,蒋凡开挂般坐上了淘宝总裁位置。 为此,时任阿里CEO张勇在任命书中力赞: 蒋凡加入阿里,始终保持创业者的冲劲,有敏锐的...

总结了 150 余个神奇网站,你不来瞅瞅吗?

原博客再更新,可能就没了,之后将持续更新本篇博客。

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

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

MySQL数据库面试题(2020最新版)

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

如果你是老板,你会不会踢了这样的员工?

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

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

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

离职半年了,老东家又发 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多个条件是什么逻辑关系?条件判断在什么时候执...

终于懂了TCP和UDP协议区别

终于懂了TCP和UDP协议区别

立即提问
相关内容推荐