canvas与webSocket在移动端做电子签名时滑动太快,pc端同步展示时出现断点或者虚线?

用canvas 与 webSocket 做一个在移动端签名并在pc端实时展示签名轨迹的功能
功能实现后发现,如果在签名时滑动太快,触发事件则无法全部响应,导致在pc端展示时出现断点, 虚线等情况。(图片一会上传)。
功能大概的实现方式就是:当touchmove 执行时 获取 x轴与y轴的数值,通过 webSocket的send() 方法传值给后台,后台接到数据以后在返回到 jsp。
滑动代码:
canvas.addEventListener("touchmove", function(e){// 触摸移动中

e.preventDefault(); //阻止屏幕滚动
var x = e.changedTouches[0].clientX - e.target.offsetLeft;
var y = e.changedTouches[0].clientY - e.target.offsetTop;

cxt.lineTo(x,y); //定义线条结束坐标
cxt.strokeStyle=color; //线条颜色
cxt.fillStyle = color; //填充颜色
var fromName = self;
var toName = $("#userlist").val(); //发给谁
var type = "coord";
var content = x+'_'+y;
var msg = fromName + "," + toName + "," + content + "," + type;
ws.send(msg);//传值给后台

cxt.stroke();//画出线条方法。
}, false)
展示图片代码
ws.onmessage = function(evt) {
var data = evt.data;
var o = eval('(' + data + ')');//将字符串转换成JSON
var oGC = oC.getContext('2d');
var coordArry = o.data.split("_");//接后台传的值

var x = coordArry[0];//通过 x轴与 y轴 出现签名笔记

var y = coordArry[1];
oGC.moveTo(x-1,y-1);
oGC.lineTo(x,y);
oGC.lineWidth = 1;

oGC.stroke();
};
移动端展示(移动端滑动快慢都不会出现断点)
图片说明

滑动太快时PC端展示效果

图片说明

    本人 H5 与 JS 都是菜鸟一枚,希望各位大神回帖的时候能详细的说一下。尽量给予直接的代码帮助。如果觉得40C币,有点少我在加40C也可以。

3个回答

刚好前两天写了一个这样的demo,出现虚线的原因是touchmove事件的触发不是连续的。

  class Pad {
    constructor (el) {
      let cvs = document.getElementById(el);
      this.ctx = cvs.getContext('2d');
      this.clientX = 0;
      this.clientY = 0;
      cvs.addEventListener('touchstart', e => {
        let x = e.changedTouches[0].clientX - e.target.offsetLeft;
        let y = e.changedTouches[0].clientY - e.target.offsetTop;
        // 记下落笔时的的坐标
        this.clientX = x;
        this.clientY = y;
      })
      cvs.addEventListener('touchmove', e => {
        let x = e.changedTouches[0].clientX - e.target.offsetLeft;
        let y = e.changedTouches[0].clientY - e.target.offsetTop;
        // 绘制路径
        this.stroke(x, y);
        // 记下移动轨迹的坐标
        this.clientX = x;
        this.clientY = y;
      })
    }
    stroke(startX, startY) {
      /**
       * touchmove不是连续触发的,所以想要画出连续的线,只要将上一次touchmove触发时的坐标和当前touchmove触发时的的坐标连成线就可以了
       * */
      this.ctx.beginPath();
      this.ctx.lineWidth = 5;
      this.ctx.moveTo(startX, startY);
      this.ctx.lineTo(this.clientX, this.clientY);
      this.ctx.stroke();
      this.ctx.closePath();
    }
  }
  new Pad('myCanvas');
IT_NQR
IT_年轻人 回复yanzhi_2016: 可以。 你如果方便可以加我QQ 810663949。
大约一年之前 回复
yanzhi_2016
yanzhi_2016 回复IT_年轻人: 能看下你代码吗
大约一年之前 回复
yanzhi_2016
yanzhi_2016 回复IT_年轻人: 就是这样的,实时记录轨迹。弧线也可以画,你看油的勾就是弧线。你是觉得线条不够圆润吗?
大约一年之前 回复
IT_NQR
IT_年轻人 我刚才试了一下,线是不断,但出来的都是 直线。我不确定是我方式不对,还是你的代码只能用在直线上面
大约一年之前 回复
IT_NQR
IT_年轻人 我上面展示的效果图片是在PC端实时查看的效果,我在手机上面无论滑动多快 线都是连在一起的。你提供的代码只能画直线吗?还是弧线也可以。
大约一年之前 回复

其一是要想获取触控的属性(坐标),首先要获取触控的对象,移动端多个指针,PC端只有一个指针,所以要取所有手指e.touches[x]; 其二是触摸时浏览器有个默认的事件,这个事件会阻断你的所有操作。所以在操作之前要先把默认事件除掉evt.preventDefault();否则怪异现象层出不穷。 其三是手机端可以addEventListener事件绑定,PC用ontouchmove,ontouchstart,ontouchend。

IT_NQR
IT_年轻人 这个链接地址的博主,在几天以前就成为我的微信好友了。他做的是保存之后才展示出图片,我做的实时展示签名轨迹的。百度上我已经搜过好多相关的问题。看过了很多博客。。。
大约一年之前 回复
Csdn user default icon
上传中...
上传图片
插入图片
抄袭、复制答案,以达到刷声望分或其他目的的行为,在CSDN问答是严格禁止的,一经发现立刻封号。是时候展现真正的技术了!
其他相关推荐
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 // }) }); ```
canvas渲染图片对页面加载速度会有提升吗
页面中有很多图片 直接引用< img src="./img/0.jpg"> 和drawImage()转换成canvas那种会快一些
如何利用WebSocket在<Canvas>标签上显示动画?
想将服务器端窗口渲染出来的图像不停地上传到Canvas标签上,Canvas通过不停读取PNG图像,在远端实现动画效果,这样能办到吗?利用WebSocket能达到实时吗? 其中可能涉及到哪些语言呢?或者有相似的技术可以借鉴吗?
我使用画布把文字和图片合成一张新图 在分享出去 图片看起来非常模糊
公司一个项目需要把文字和图片 二维码各种合成一张新图 但是分享出去后图片看起来比较模糊求大佬指导![图片说明](https://img-ask.csdn.net/upload/202001/15/1579074867_663704.jpg /** * 分享时的图标 */ try { Bitmap bitmap = BitmapFactory.decodeResource(getResources(), R.mipmap.image_act_back); int width = 480;//画布大小 int height = 853;// // mBitmap =Bitmap.createBitmap(width,height, Bitmap.Config.ARGB_8888); mBitmap =BitmapUtil.getBitmap(bitmap,width,height); canvas = new Canvas(mBitmap); int x = 30; int y = 15; //合成淘宝 (判断是淘宝还是拼多多) Bitmap bitmap_tb = null; if (shopType.equals("1")){ //淘宝 bitmap_tb = BitmapFactory.decodeResource(getResources(), R.mipmap.qbs_tb); }else if (shopType.equals("3")){ bitmap_tb = BitmapFactory.decodeResource(getResources(), R.mipmap.qbs_pdd_order1); }else if (shopType.equals("4")){ bitmap_tb = BitmapFactory.decodeResource(getResources(), R.mipmap.qbs_wph); } Bitmap bitmap2 = BitmapUtil.fitBitmap(bitmap_tb,x); canvas.drawBitmap(bitmap2,x,y,mPicturePaint2); //商品标题 TextPaint1.setAntiAlias(true); TextPaint1.setTextSize(18); TextPaint1.setColor(getResources().getColor(R.color.black)); String content1 = shopTitle.length()>22? shopTitle.substring(0,22):shopTitle; int top2 = 30; canvas.drawText(content1,x+40,x,TextPaint1); //第二行标题 String content2; if (shopTitle.length()>34){ content2 = shopTitle.substring(22,35)+"...."; }else { content2 = shopTitle.length()>22? shopTitle.substring(23):shopTitle; } TextPaint1.setAntiAlias(true); TextPaint1.setTextSize(18); TextPaint1.setColor(getResources().getColor(R.color.black)); top2 = top2+30; canvas.drawText(content2,x,top2,TextPaint1); //券后价格 String content6 = "券后价:"; TextPaint1.setAntiAlias(true); TextPaint1.setTextSize(24); TextPaint1.setColor(getResources().getColor(R.color.detail_prise)); top2 = top2+40; canvas.drawText(content6,x,top2,TextPaint1); //券后价金额 TextPaint1.setAntiAlias(true); TextPaint1.setTextSize(30); TextPaint1.setColor(getResources().getColor(R.color.detail_prise)); String content8 = "¥"+price_after_coupons; canvas.drawText(content8,x+80,top2,TextPaint1); // //券背景 // Bitmap bitmap_q = BitmapFactory.decodeResource(getResources(), R.mipmap.qbs_q_back); // Bitmap bitmap_back = BitmapUtil.fitBitmap(bitmap_q,110); // canvas.drawBitmap(bitmap_back,330,top2-15,mPicturePaint2); if (!price_coupons.equals("")){ //券金额 TextPaint1.setAntiAlias(true); TextPaint1.setTextSize(16); TextPaint1.setColor(getResources().getColor(R.color.detail_prise));//detail_prise String content4 = "券¥"; canvas.drawText(content4,340,top2,TextPaint1); TextPaint1.setAntiAlias(true); TextPaint1.setTextSize(22); TextPaint1.setColor(getResources().getColor(R.color.detail_prise)); String content5 = price_coupons+""; canvas.drawText(content5,340+30,top2,TextPaint1); } //原价 TextPaint1.setAntiAlias(true); TextPaint1.setTextSize(16); TextPaint1.setColor(getResources().getColor(R.color.theme_black2)); CharSequence content3 = "原价¥"; top2 = top2+40; canvas.drawText(content3,0,content3.length(),x,top2,TextPaint1); //原价金额 TextPaint1.setAntiAlias(true); TextPaint1.setTextSize(26); TextPaint1.setColor(getResources().getColor(R.color.theme_black2)); CharSequence content7 = price; canvas.drawText(content7,0,content7.length(),x+60,top2,TextPaint1); //商品图 // int logo = 0; // Logger.e(TAG,"图片宽"+resource.getWidth()+"图片高"+resource.getHeight()); Bitmap bitmap_shop = BitmapUtil.fitBitmap(resource,width-50); Logger.e(TAG,"图片宽"+bitmap_shop.getWidth()+"图片高"+bitmap_shop.getHeight()); top2 = top2+20; // canvas = new Canvas(mBitmap); // logo = top2; canvas.drawBitmap(bitmap_shop,x,top2,mPicturePaint2); //公司logo Bitmap bitmap_logo = BitmapFactory.decodeResource(getResources(), R.mipmap.ht_creat_logo);//qbs_creat_logo icon_yfg Bitmap bitmap_log = BitmapUtil.fitBitmap(bitmap_logo,150); canvas.drawBitmap(bitmap_log,150,width+top2,mPicturePaint2); //二维码合成 Bitmap Zxing = ZxingUtils.createQRCode(Wx_Url,300); int width1 = Zxing.getWidth(); int height1 = Zxing.getHeight(); Matrix matrix = new Matrix(); matrix.postScale(0.35f,0.35f); Bitmap bitmap1 = Bitmap.createBitmap(Zxing, 0, 0, width1, height1, matrix, true); Logger.e("二维码宽","二维码宽"+bitmap1.getWidth()); canvas.drawBitmap(bitmap1,353,width-20+top2,mPicturePaint1); canvas.save(); canvas.restore(); creat_pic.setImageBitmap(mBitmap); ``` ```
移动端canvus得到的字体点阵信息与电脑端不一致。
**最近在使用canvas描绘文字来获取它的字体点阵,在电脑端可以将一个16px的字体清楚的展示一个16:16的字体点阵,由于是移动端App开发,所以在移植到手机端得到的字体点阵与电脑端差距太大,上网查到原因是手机与电脑的devicePixelRatio(设备像素比)不一致,电脑的是1,我的手机是3。也就是我的手机会将一个正常的图像放大3倍的像素图来处理,所以导致描绘出来字体模糊,进而导致得到的点阵不清楚,字体较正常的粗了很多。上网看过一些解决方法,都是说将canvus弄成原来3倍大小的再压缩至原来的大小,但这都只是解决描绘出来的字体显示模糊的问题,也就是看起来是清楚的,实际上的图像还是原来的那个3倍的canvas模糊图像,手机去执行获取图像的像素数据时,仍然是原先3倍的canvas的模糊图像的数据。有没有什么方法可以让手机移动端也可以显示出与电脑端解析一样的16:16的字体点阵信息?** *** <br> 电脑端: ![图片说明](https://img-ask.csdn.net/upload/201911/10/1573362354_102747.png) *** 移动端: ![图片说明](https://img-ask.csdn.net/upload/201911/10/1573362406_352863.jpg) <br> *** 代码: ![图片说明](https://img-ask.csdn.net/upload/201911/10/1573362457_263046.png) *** **可以通过手机和电脑访问[测试](http://47.106.254.86:1234/)网页来看到手机与电脑端的差异。**
Android Canvas绘制的Path ,如何高效的拆分成两个线段?
如题: 1.通过贝塞尔曲线绘制了一条很长的线段。 2.通过设置画笔的Mode.DST.OUT 将线断进行了擦断效果(但是实际坐标没有变化) 3.现在需要将擦断的两个线断进行分别移动。 现在如果擦除的时候橡皮擦碰见了绘制的像素点,那么可以进行擦除。(但是线断会产生比较大的长短变化)如果没有碰见像素点,那么不会产生擦除效果。 我当前的手段: 1.将橡皮擦轨迹存储为Region 。将线段轨迹也存储为Region 2.通过region.quickReject(region1) 判断两个轨迹是否有相交。 3.遍历线段轨迹的坐标(x,y)是否在橡皮擦Region之中。有就删除,没有就跳过。 4.通过删除,将存储线段坐标的数组,拆分成多个数组。 现在的问题是: 如果擦除时没有碰见线段中的实际节点,将无法进行擦除。 而手机中绘制速度很快时,坐标点于点之间间距较高。 请问这种情况时,该如何判断? 或者有其他更好的判断和拆分手段么?
canvas.drawPoint不起作用
Paint paint3 = new Paint(); paint3.setAntiAlias(true); paint3.setColor(Color.BLACK); paint3.setStrokeWidth(20); paint3.setStrokeCap(Paint.Cap.ROUND); canvas.drawPoint(centerX, centerY, paint3); canvas.drawCircle() 和 canvas.drawRect()都是可以的,canvas.drawPoint()就不起作用了,why?
移动端 HTML5 CANVAS 兼容性问题
移动端 HTML5 CANVAS 兼容性问题 html5 目前在做微信公众平台 ,使用到canvas绘制图片,在某些设备上出现偶尔无法绘制的问题。 目前测试出现在 oppo R8007 小米s1上,代码是最最简单的代码,比如绘制一行字,画矩形等,均出现间歇性的无法绘制的问题。 不知道是代码哪里没有做对,还是怎样?请教各位大神,有没有什么解决方案。
【html】canvas在ios上导出图片,图片会放大一倍,怎么保持1:1
例:图片为400X400的,在ios上打开canvas程序,然后绘画在400X400的canvas画板上 然后导出下载图片,下载出来的图片是800X800的 这个愿意是因为ios的分辨率大,我查到了,但是我想要的是,让他下载出来保持和导入的一样是400Px的,这个如何处理呢?
用canvas绘图小车上下坡
√小车上下坡,要使用canvas+js进行绘图,模拟平地,上坡,坡顶,下坡四个状态的动画 1.不能使用任何图片,要求所有画面都要canbvas绘画出来 2、要求有车身,轮胎,车头 5、包含平地,上坡,坡顶,下坡四个部分的状态 4、体现出车轮滚动 5、体现王启动时候加速、刹车停止前减速的过程
canvas实现签字版功能,没反应,懂得朋友来给看下,感谢
签字版这个功能我是先看的教材的,然后理解清楚后,自己写的,后来不行, 索性直接仿照教材来写,但是最后几乎改成一模一样的了,浏览器后台也查不出 问题,就是没反应。 问题1:现在就是没反应,毫无反应,代码就差直接复制粘贴了,懂得朋友给讲讲 不甚感谢 问题2:最后三句是调用函数,这个调用是可以直接这样用的吗,最开始我自己写 是 :onmousedown=function(){forDown()};但是会出现错误,就是后台出现 说clientX这个属性无法识别。这个点也给顺便说活吧 图片是代码截图,请过目 ![图片说明](https://img-ask.csdn.net/upload/201912/20/1576834993_956837.png)
手机端canvas刮奖无效果,PC端好好的
window.onload=function () { var canvas = document.getElementById("birthday"); var width = window.screen.availWidth; canvas.width = window.screen.availWidth; canvas.height = width*2; canvas.style.border = "1px solid red"; var context = canvas.getContext("2d"); /*图像加载*/ var image = new Image(); image.src="a1.jpg"; image.addEventListener('load',eventSheetloaded,false); function eventSheetloaded(){ context.drawImage(image,0,0); } var linex = []; var liney = []; var lastX = -1; var lastY = -1; var flag = 0; //临时绘图数据 var imageData = ""; canvas.addEventListener('mousemove', onMouseMove, false); canvas.addEventListener('mousedown', onMouseDown, false); canvas.addEventListener('mouseup', onMouseUp, false); function onMouseMove(evt) { if (flag == 1) { var x = evt.layerX; var y = evt.layerY; linex.push(x); liney.push(y); context.lineTo(x,y); lastX = x; } lastY = y; context.lineCap="round"; context.lineJoin="round"; context.lineWidth = 20; context.shadowColor = 'white'; context.strokeStyle = "rgba(0,0,0,0)"; context.globalCompositeOperation="destination-out"; context.stroke(); context.strokeStyle = "rgba(254,0,0,0.1)"; context.globalCompositeOperation="destination-out"; context.stroke(); } function onMouseDown(evt) { flag = 1; lastX = evt.layerX; lastY = evt.layerY; linex.push(lastX); liney.push(lastY); context.beginPath(); context.moveTo(lastX,lastY); } function onMouseUp(evt) { flag = 0; context.clearRect(0,0,0,0); } function onMouseOut(evt){ flag = 0; context.clearRect(0,0,500,400); reDraw(); } }; 为什么呢·!?????
H5canvas 获取对话框的内容后 获取的是数字1-9 打印九层塔(1-9层的结构)
H5canvas 获取对话框的内容后 获取的是数字1-9 打印九层塔(1-9层的结构)
canvas画布跨域问题 苹果端
canvas 画布将多张图片拼凑, 使用 toDataURL 时出现跨域报错, 加上 headImg.crossOrigin = ”*“之后 在安卓端可以正常显示, 但是在 chrome以及苹果端 还是有跨域报错 不能正常显示图片 求解决方案。
为什么我的pyecharts柱形图表部署在flask后,横坐标由原来的文字标签变成数字了?
求助各位大佬!我是一个pyecharts小白,下面是我用flask部署pyecharts的代码。 ``` import pandas as pd from flask import Flask, render_template from pyecharts import options as opts from pyecharts.charts import Bar from pyecharts.charts import Timeline from pyecharts.charts import Pie app = Flask(__name__, static_folder="templates") data总=pd.read_csv('datazong.csv',encoding='utf-8') zuojia = pd.read_csv('zuojia.csv',encoding='gbk') X轴=[str(x) for x in zuojia.loc[:,'网络作家']] Y轴=[str(x) for x in zuojia.loc[:,'版税收入(万元)']] def bar_datazoom_inside() -> Timeline: tl = Timeline() for i in range(2014, 2020): c = ( Bar() .add_xaxis(list(zip(list(data总.index)))) .add_yaxis("显示",list(data总["{}".format(i)])) .set_global_opts( title_opts=opts.TitleOpts(title="纵横小说月票榜"), datazoom_opts=opts.DataZoomOpts(type_="inside"), visualmap_opts=opts.VisualMapOpts(type_="color", max_=250000, min_=200,pos_right='20',pos_top='middle'), toolbox_opts=opts.ToolboxOpts(), ) .set_series_opts( label_opts=opts.LabelOpts(is_show=False), markpoint_opts=opts.MarkPointOpts( data=[ opts.MarkPointItem(type_="max", name="最大值"), opts.MarkPointItem(type_="min", name="最小值"), ] ), ) ) tl.add(c, "{}年".format(i)) return tl def pie_rosetype() -> Pie: c = ( Pie() .add( "", [list(z) for z in zip(X轴, Y轴)], radius=["30%", "60%"], center=["50%", "60%"], rosetype="area", ) .set_global_opts(title_opts=opts.TitleOpts(title="2018作家版税收入榜单",pos_top = 'middle')) .set_series_opts( label_opts=opts.TextStyleOpts(font_style='oblique') ) ) return c @app.route("/") def index(): return render_template("index.html") @app.route("/barChart") def get_bar_chart(): tl = bar_datazoom_inside() return tl.dump_options_with_quotes() @app.route("/2") def index2(): return render_template("index2.html") @app.route("/barChart2") def get_bar_chart2(): c = pie_rosetype() return c.dump_options_with_quotes() if __name__ == "__main__": app.run() ``` 代码没问题,也能够将网站部署出来,如下图: ![flask](https://img-ask.csdn.net/upload/201912/29/1577606001_509738.png) 但是!我的横坐标变成数字了,原来在jupyter简单的render后产生的可视化横坐标是正常的如: ![图片说明](https://img-ask.csdn.net/upload/201912/29/1577606183_550451.png) 请各位大佬帮帮忙,我实在搞不明白哪里出错了。 下面是我的index.html代码。 ``` <!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title>Awesome-pyecharts</title> <script src="https://cdn.bootcss.com/jquery/3.0.0/jquery.min.js"></script> <script type="text/javascript" src="https://assets.pyecharts.org/assets/echarts.min.js"></script> </head> <body> <div id="bar" style="width:1000px; height:600px;"></div> <script> $( function () { var chart = echarts.init(document.getElementById('bar'), 'white', {renderer: 'canvas'}); $.ajax({ type: "GET", url: "http://127.0.0.1:5000/barChart", dataType: 'json', success: function (result) { chart.setOption(result); } }); } ) </script> </body> </html> ```
jcanvas如何控制不规则多边形在canvas大小范围内移动
利用this.$canvas.drawPath画一个不规则多边形,如何写一个function控制其移动范围
vue中用html2canvas转换图片 图片不完整 或有偏移 有空白区域
``` html部分 <div style="height: 312px;overflow:hidden"> <div class="parter" id="parter" ref="parter"> <div class="qrcode" id="qrcode"></div> <p class="copywriting">{{changeText}}</p> </div> </div> ``` ``` js部分 html2canvas(document.getElementById('parter'), { width: 300, height: 300, backgroundColor: null, useCORS: true, // 允许图片跨域 taintTest: true, // 在渲染前测试图片 timeout: 500 // 加载延时 }).then(canvas => { canvas.toBlob((blob) => { saveAs(blob, '桌贴.png') }) }) ``` ![图片说明](https://img-ask.csdn.net/upload/201908/03/1564815559_206721.png) 导出的图片网上偏移
这样的效果如何使用JavaScript实现?
使用HTML5 Canvas绘制下面的脸。 ![图片说明](https://img-ask.csdn.net/upload/201912/07/1575655086_827225.png)
爬虫福利二 之 妹子图网MM批量下载
爬虫福利一:27报网MM批量下载    点击 看了本文,相信大家对爬虫一定会产生强烈的兴趣,激励自己去学习爬虫,在这里提前祝:大家学有所成! 目标网站:妹子图网 环境:Python3.x 相关第三方模块:requests、beautifulsoup4 Re:各位在测试时只需要将代码里的变量 path 指定为你当前系统要保存的路径,使用 python xxx.py 或IDE运行即可。
Java学习的正确打开方式
在博主认为,对于入门级学习java的最佳学习方法莫过于视频+博客+书籍+总结,前三者博主将淋漓尽致地挥毫于这篇博客文章中,至于总结在于个人,实际上越到后面你会发现学习的最好方式就是阅读参考官方文档其次就是国内的书籍,博客次之,这又是一个层次了,这里暂时不提后面再谈。博主将为各位入门java保驾护航,各位只管冲鸭!!!上天是公平的,只要不辜负时间,时间自然不会辜负你。 何谓学习?博主所理解的学习,它
大学四年自学走来,这些私藏的实用工具/学习网站我贡献出来了
大学四年,看课本是不可能一直看课本的了,对于学习,特别是自学,善于搜索网上的一些资源来辅助,还是非常有必要的,下面我就把这几年私藏的各种资源,网站贡献出来给你们。主要有:电子书搜索、实用工具、在线视频学习网站、非视频学习网站、软件下载、面试/求职必备网站。 注意:文中提到的所有资源,文末我都给你整理好了,你们只管拿去,如果觉得不错,转发、分享就是最大的支持了。 一、PDF搜索网站推荐 对于大部
linux系列之常用运维命令整理笔录
本博客记录工作中需要的linux运维命令,大学时候开始接触linux,会一些基本操作,可是都没有整理起来,加上是做开发,不做运维,有些命令忘记了,所以现在整理成博客,当然vi,文件操作等就不介绍了,慢慢积累一些其它拓展的命令,博客不定时更新 顺便拉下票,我在参加csdn博客之星竞选,欢迎投票支持,每个QQ或者微信每天都可以投5票,扫二维码即可,http://m234140.nofollow.ax.
比特币原理详解
一、什么是比特币 比特币是一种电子货币,是一种基于密码学的货币,在2008年11月1日由中本聪发表比特币白皮书,文中提出了一种去中心化的电子记账系统,我们平时的电子现金是银行来记账,因为银行的背后是国家信用。去中心化电子记账系统是参与者共同记账。比特币可以防止主权危机、信用风险。其好处不多做赘述,这一层面介绍的文章很多,本文主要从更深层的技术原理角度进行介绍。 二、问题引入  假设现有4个人
程序员接私活怎样防止做完了不给钱?
首先跟大家说明一点,我们做 IT 类的外包开发,是非标品开发,所以很有可能在开发过程中会有这样那样的需求修改,而这种需求修改很容易造成扯皮,进而影响到费用支付,甚至出现做完了项目收不到钱的情况。 那么,怎么保证自己的薪酬安全呢? 我们在开工前,一定要做好一些证据方面的准备(也就是“讨薪”的理论依据),这其中最重要的就是需求文档和验收标准。一定要让需求方提供这两个文档资料作为开发的基础。之后开发
网页实现一个简单的音乐播放器(大佬别看。(⊙﹏⊙))
今天闲着无事,就想写点东西。然后听了下歌,就打算写个播放器。 于是乎用h5 audio的加上js简单的播放器完工了。 欢迎 改进 留言。 演示地点跳到演示地点 html代码如下`&lt;!DOCTYPE html&gt; &lt;html&gt; &lt;head&gt; &lt;title&gt;music&lt;/title&gt; &lt;meta charset="utf-8"&gt
Python十大装B语法
Python 是一种代表简单思想的语言,其语法相对简单,很容易上手。不过,如果就此小视 Python 语法的精妙和深邃,那就大错特错了。本文精心筛选了最能展现 Python 语法之精妙的十个知识点,并附上详细的实例代码。如能在实战中融会贯通、灵活使用,必将使代码更为精炼、高效,同时也会极大提升代码B格,使之看上去更老练,读起来更优雅。 1. for - else 什么?不是 if 和 else 才
数据库优化 - SQL优化
前面一篇文章从实例的角度进行数据库优化,通过配置一些参数让数据库性能达到最优。但是一些“不好”的SQL也会导致数据库查询变慢,影响业务流程。本文从SQL角度进行数据库优化,提升SQL运行效率。 判断问题SQL 判断SQL是否有问题时可以通过两个表象进行判断: 系统级别表象 CPU消耗严重 IO等待严重 页面响应时间过长
2019年11月中国大陆编程语言排行榜
2019年11月2日,我统计了某招聘网站,获得有效程序员招聘数据9万条。针对招聘信息,提取编程语言关键字,并统计如下: 编程语言比例 rank pl_ percentage 1 java 33.62% 2 c/c++ 16.42% 3 c_sharp 12.82% 4 javascript 12.31% 5 python 7.93% 6 go 7.25% 7
通俗易懂地给女朋友讲:线程池的内部原理
餐厅的约会 餐盘在灯光的照耀下格外晶莹洁白,女朋友拿起红酒杯轻轻地抿了一小口,对我说:“经常听你说线程池,到底线程池到底是个什么原理?”我楞了一下,心里想女朋友今天是怎么了,怎么突然问出这么专业的问题,但做为一个专业人士在女朋友面前也不能露怯啊,想了一下便说:“我先给你讲讲我前同事老王的故事吧!” 大龄程序员老王 老王是一个已经北漂十多年的程序员,岁数大了,加班加不动了,升迁也无望,于是拿着手里
经典算法(5)杨辉三角
写在前面: 我是 扬帆向海,这个昵称来源于我的名字以及女朋友的名字。我热爱技术、热爱开源、热爱编程。技术是开源的、知识是共享的。 这博客是对自己学习的一点点总结及记录,如果您对 Java、算法 感兴趣,可以关注我的动态,我们一起学习。 用知识改变命运,让我们的家人过上更好的生活。 目录一、杨辉三角的介绍二、杨辉三角的算法思想三、代码实现1.第一种写法2.第二种写法 一、杨辉三角的介绍 百度
腾讯算法面试题:64匹马8个跑道需要多少轮才能选出最快的四匹?
昨天,有网友私信我,说去阿里面试,彻底的被打击到了。问了为什么网上大量使用ThreadLocal的源码都会加上private static?他被难住了,因为他从来都没有考虑过这个问题。无独有偶,今天笔者又发现有网友吐槽了一道腾讯的面试题,我们一起来看看。 腾讯算法面试题:64匹马8个跑道需要多少轮才能选出最快的四匹? 在互联网职场论坛,一名程序员发帖求助到。二面腾讯,其中一个算法题:64匹
面试官:你连RESTful都不知道我怎么敢要你?
面试官:了解RESTful吗? 我:听说过。 面试官:那什么是RESTful? 我:就是用起来很规范,挺好的 面试官:是RESTful挺好的,还是自我感觉挺好的 我:都挺好的。 面试官:… 把门关上。 我:… 要干嘛?先关上再说。 面试官:我说出去把门关上。 我:what ?,夺门而去 文章目录01 前言02 RESTful的来源03 RESTful6大原则1. C-S架构2. 无状态3.统一的接
JDK12 Collectors.teeing 你真的需要了解一下
前言在 Java 12 里面有个非常好用但在官方 JEP 没有公布的功能,因为它只是 Collector 中的一个小改动,它的作用是 merge 两个 collector 的结果,这句话
为啥国人偏爱Mybatis,而老外喜欢Hibernate/JPA呢?
关于SQL和ORM的争论,永远都不会终止,我也一直在思考这个问题。昨天又跟群里的小伙伴进行了一番讨论,感触还是有一些,于是就有了今天这篇文。 声明:本文不会下关于Mybatis和JPA两个持久层框架哪个更好这样的结论。只是摆事实,讲道理,所以,请各位看官勿喷。 一、事件起因 关于Mybatis和JPA孰优孰劣的问题,争论已经很多年了。一直也没有结论,毕竟每个人的喜好和习惯是大不相同的。我也看
SQL-小白最佳入门sql查询一
一 说明 如果是初学者,建议去网上寻找安装Mysql的文章安装,以及使用navicat连接数据库,以后的示例基本是使用mysql数据库管理系统; 二 准备前提 需要建立一张学生表,列分别是id,名称,年龄,学生信息;本示例中文章篇幅原因SQL注释略; 建表语句: CREATE TABLE `student` ( `id` int(11) NOT NULL AUTO_INCREMENT, `
项目中的if else太多了,该怎么重构?
介绍 最近跟着公司的大佬开发了一款IM系统,类似QQ和微信哈,就是聊天软件。我们有一部分业务逻辑是这样的 if (msgType = "文本") { // dosomething } else if(msgType = "图片") { // doshomething } else if(msgType = "视频") { // doshomething } else { // dosho
【图解经典算法题】如何用一行代码解决约瑟夫环问题
约瑟夫环问题算是很经典的题了,估计大家都听说过,然后我就在一次笔试中遇到了,下面我就用 3 种方法来详细讲解一下这道题,最后一种方法学了之后保证让你可以让你装逼。 问题描述:编号为 1-N 的 N 个士兵围坐在一起形成一个圆圈,从编号为 1 的士兵开始依次报数(1,2,3…这样依次报),数到 m 的 士兵会被杀死出列,之后的士兵再从 1 开始报数。直到最后剩下一士兵,求这个士兵的编号。 1、方
致 Python 初学者
文章目录1. 前言2. 明确学习目标,不急于求成,不好高骛远3. 在开始学习 Python 之前,你需要做一些准备2.1 Python 的各种发行版2.2 安装 Python2.3 选择一款趁手的开发工具3. 习惯使用IDLE,这是学习python最好的方式4. 严格遵从编码规范5. 代码的运行、调试5. 模块管理5.1 同时安装了py2/py35.2 使用Anaconda,或者通过IDE来安装模
“狗屁不通文章生成器”登顶GitHub热榜,分分钟写出万字形式主义大作
一、垃圾文字生成器介绍 最近在浏览GitHub的时候,发现了这样一个骨骼清奇的雷人项目,而且热度还特别高。 项目中文名:狗屁不通文章生成器 项目英文名:BullshitGenerator 根据作者的介绍,他是偶尔需要一些中文文字用于GUI开发时测试文本渲染,因此开发了这个废话生成器。但由于生成的废话实在是太过富于哲理,所以最近已经被小伙伴们给玩坏了。 他的文风可能是这样的: 你发现,
程序员:我终于知道post和get的区别
IT界知名的程序员曾说:对于那些月薪三万以下,自称IT工程师的码农们,其实我们从来没有把他们归为我们IT工程师的队伍。他们虽然总是以IT工程师自居,但只是他们一厢情愿罢了。 此话一出,不知激起了多少(码农)程序员的愤怒,却又无可奈何,于是码农问程序员。 码农:你知道get和post请求到底有什么区别? 程序员:你看这篇就知道了。 码农:你月薪三万了? 程序员:嗯。 码农:你是怎么做到的? 程序员:
GitHub标星近1万:只需5秒音源,这个网络就能实时“克隆”你的声音
作者 | Google团队译者 | 凯隐编辑 | Jane出品 | AI科技大本营(ID:rgznai100)本文中,Google 团队提出了一种文本语音合成(text to speech)神经系统,能通过少量样本学习到多个不同说话者(speaker)的语音特征,并合成他们的讲话音频。此外,对于训练时网络没有接触过的说话者,也能在不重新训练的情况下,仅通过未知说话者数秒的音频来合成其讲话音频,即网
《程序人生》系列-这个程序员只用了20行代码就拿了冠军
你知道的越多,你不知道的越多 点赞再看,养成习惯GitHub上已经开源https://github.com/JavaFamily,有一线大厂面试点脑图,欢迎Star和完善 前言 这一期不算《吊打面试官》系列的,所有没前言我直接开始。 絮叨 本来应该是没有这期的,看过我上期的小伙伴应该是知道的嘛,双十一比较忙嘛,要值班又要去帮忙拍摄年会的视频素材,还得搞个程序员一天的Vlog,还要写BU
加快推动区块链技术和产业创新发展,2019可信区块链峰会在京召开
      11月8日,由中国信息通信研究院、中国通信标准化协会、中国互联网协会、可信区块链推进计划联合主办,科技行者协办的2019可信区块链峰会将在北京悠唐皇冠假日酒店开幕。   区块链技术被认为是继蒸汽机、电力、互联网之后,下一代颠覆性的核心技术。如果说蒸汽机释放了人类的生产力,电力解决了人类基本的生活需求,互联网彻底改变了信息传递的方式,区块链作为构造信任的技术有重要的价值。   1
程序员把地府后台管理系统做出来了,还有3.0版本!12月7号最新消息:已在开发中有github地址
第一幕:缘起 听说阎王爷要做个生死簿后台管理系统,我们派去了一个程序员…… 996程序员做的梦: 第一场:团队招募 为了应对地府管理危机,阎王打算找“人”开发一套地府后台管理系统,于是就在地府总经办群中发了项目需求。 话说还是中国电信的信号好,地府都是满格,哈哈!!! 经常会有外行朋友问:看某网站做的不错,功能也简单,你帮忙做一下? 而这次,面对这样的需求,这个程序员
网易云6亿用户音乐推荐算法
网易云音乐是音乐爱好者的集聚地,云音乐推荐系统致力于通过 AI 算法的落地,实现用户千人千面的个性化推荐,为用户带来不一样的听歌体验。 本次分享重点介绍 AI 算法在音乐推荐中的应用实践,以及在算法落地过程中遇到的挑战和解决方案。 将从如下两个部分展开: AI 算法在音乐推荐中的应用 音乐场景下的 AI 思考 从 2013 年 4 月正式上线至今,网易云音乐平台持续提供着:乐屏社区、UGC
【技巧总结】位运算装逼指南
位算法的效率有多快我就不说,不信你可以去用 10 亿个数据模拟一下,今天给大家讲一讲位运算的一些经典例子。不过,最重要的不是看懂了这些例子就好,而是要在以后多去运用位运算这些技巧,当然,采用位运算,也是可以装逼的,不信,你往下看。我会从最简单的讲起,一道比一道难度递增,不过居然是讲技巧,那么也不会太难,相信你分分钟看懂。 判断奇偶数 判断一个数是基于还是偶数,相信很多人都做过,一般的做法的代码如下
【管理系统课程设计】美少女手把手教你后台管理
【后台管理系统】URL设计与建模分析+项目源码+运行界面 栏目管理、文章列表、用户管理、角色管理、权限管理模块(文章最后附有源码) 一、这是一个什么系统? 1.1 学习后台管理系统的原因 随着时代的变迁,现如今各大云服务平台横空出世,市面上有许多如学生信息系统、图书阅读系统、停车场管理系统等的管理系统,而本人家里就有人在用烟草销售系统,直接在网上完成挑选、购买与提交收货点,方便又快捷。 试想,
4G EPS 第四代移动通信系统
目录 文章目录目录4G EPSEPS 的架构EPS 的参考模型E-UTRANUEeNodeBEPCMME(移动性控制处理单元)S-GW(E-RAB 无线访问承载接入点)P-GW(PDN 接入点)HSS(用户认证中心)PCRF(计费规则与策略)SPR(用户档案)OCS(在线计费)OFCS(离线计费)接口类型Uu 接口(空中接口,UE 和 AN 之间)S1 接口(AN 和 CN 之间)S1-U 接口和
日均350000亿接入量,腾讯TubeMQ性能超过Kafka
整理 | 夕颜出品 | AI科技大本营(ID:rgznai100) 【导读】近日,腾讯开源动作不断,相继开源了分布式消息中间件TubeMQ,基于最主流的 OpenJDK8开发的
相关热词 c# 引用mysql c#动态加载非托管dll c# 两个表数据同步 c# 返回浮点json c# imap 链接状态 c# 漂亮字 c# 上取整 除法 c#substring c#中延时关闭 c#线段拖拉
立即提问