canvas里边可以放.gif动态图片吗?

想在canvas里边放.gif图片,但是用
document.getElementById("tulip").onload=function(){
var c=document.getElementById("myCanvas");
var ctx=c.getContext("2d");
var img=document.getElementById("tulip");
ctx.drawImage(img,0,0);
};
图片成静态了,不动了,大神们请问canvas里可以加载动态图片吗,有什么好办法吗?

1个回答

Csdn user default icon
上传中...
上传图片
插入图片
抄袭、复制答案,以达到刷声望分或其他目的的行为,在CSDN问答是严格禁止的,一经发现立刻封号。是时候展现真正的技术了!
其他相关推荐
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 求解

Android中用canvas如何绘制动态图?请大神速回,在线等!!

public class MyView extends View { private Paint paint; private int roundColor, roundProgressColor; private float roundWidth; private int style; private int process = 1; private Canvas mcanvas; private RectF oval; public MyView(Context context) { this(context, null); } public MyView(Context context, AttributeSet attrs) { this(context, attrs, 0); } public MyView(Context context, AttributeSet attrs, int defStyleAttr) { super(context, attrs, defStyleAttr); paint = new Paint(); TypedArray mtypeArray = context.obtainStyledAttributes(attrs, R.styleable.RoundProgressBar); roundColor = mtypeArray.getColor(R.styleable.RoundProgressBar_roundColor, Color.RED); roundWidth = mtypeArray.getDimension(R.styleable.RoundProgressBar_roundWidth, 15); roundProgressColor = mtypeArray.getColor(R.styleable.RoundProgressBar_roundProgressColor, Color.GREEN); style = mtypeArray.getInt(R.styleable.RoundProgressBar_style, 0); mtypeArray.recycle(); } @Override protected void onDraw(Canvas canvas) { super.onDraw(canvas); int center = getWidth() / 2; int radius = (int) (center - roundWidth / 2); // // paint.setColor(roundColor); // paint.setStyle(Paint.Style.STROKE); // paint.setStrokeWidth(roundWidth); // paint.setAntiAlias(true); // PathEffect effects = new DashPathEffect(new float[]{10,10,10,10},1); // paint.setPathEffect(effects); // canvas.drawCircle(center, center, radius, paint); paint.setStrokeWidth(roundWidth); paint.setColor(roundProgressColor); oval = new RectF(center - radius, center - radius, center + radius, center + radius); paint.setStyle(Paint.Style.STROKE); PathEffect effects = new DashPathEffect(new float[]{10, 10, 10, 10}, 1); paint.setAntiAlias(true); paint.setPathEffect(effects); canvas.drawArc(oval, 120, 30*process%300, false, paint); mcanvas = canvas; Log.i("pan", "meiyoujinlai"); Log.i("pan", canvas.toString() + "meiyou"); new Thread() { @Override public void run() { super.run(); Message msg = new Message(); msg.what = 1; while (true) { try { mHandler.sendMessage(msg); sleep(1000); } catch (InterruptedException e) { e.printStackTrace(); } } } }.start(); } private Handler mHandler = new Handler() { @Override public void handleMessage(Message msg) { super.handleMessage(msg); if (msg.what == 1) { Log.i("pan", "xianchengzaifa!!"); Log.i("pan", mcanvas + "is value"); mcanvas.drawArc(oval, 120, process % 300, false, paint); process += 20; } } }; } 上面是我的代码,下面是我的效果图![图片说明](https://img-ask.csdn.net/upload/201512/23/1450835340_418578.png)。这是我想实现的动态效果:![图片说明](https://img-ask.csdn.net/upload/201512/23/1450835456_314745.png)

请帮忙看看为什么canvas.drawBitmap没能显示出图片

显示图片的代码如下 ``` public DrawBitmapView(Context context,int width,int height,Bitmap bitmap) { super(context); initPaint(); mBitWidth = width; mBitHeight = height; mBitmap = bitmap; mSrcRect = new Rect(0,0,mBitWidth,mBitHeight); mDestRect = new Rect(0,0,mBitWidth,mBitHeight); Log.e("TAG", "宽"+mBitWidth+"高"+mBitHeight+"mSrcRect"+mSrcRect+"mDestRect"+mDestRect); Canvas canvas = new Canvas(); canvas.drawBitmap(mBitmap,mSrcRect,mDestRect,mBitPaint); Log.d("TAG","图片已打印"); setWillNotDraw(false); invalidate(); } ``` 这是log显示的结果 ``` 05-04 22:04:06.443 15938-15938/com.example.xxx.board_meeting E/TAG: 宽291高295mSrcRectRect(0, 0 - 291, 295)mDestRectRect(0, 0 - 291, 295) 05-04 22:06:41.537 15938-15938/com.example.xxx.board_meeting E/TAG: 图片已打印 ``` 选择图片后的 各个值的显示![图片说明](https://img-ask.csdn.net/upload/201805/04/1525442857_888386.png)![图片说明](https://img-ask.csdn.net/upload/201805/04/1525442870_663126.png) 最后想问一下,有没有安卓开发的交流群。。我最近在开发过程中遇到了很多问题,希望能有个地方请教一下大家orz

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.drawText 事件?

当点击按钮时,如何执行绘制文本 drawText 事件?如何设置 setContentView(R.layout.main) 来查看按钮,下面的代码是关于绘制文本的。 public void onCreate(Bundle savedInstanceState) { super.onCreate(savedInstanceState); drawView = new DrawView(this); setContentView(drawView); } public DrawView(Context context) { super(context); textpaint.setColor(Color.WHITE); } public void onDraw(Canvas canvas) { canvas.drawText("Testing", 20, 55, textpaint); }

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

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

html5在canvas中插入图片

在canvas中显示图片非常简单。可以通过修正层为图片添加印章、拉伸图片或者修改图片等,并且图片通常会成为canvas上的焦点。用HTML5 Canvas API内置的几个简单命令可以轻松地为canvas添加图片内容。 不过,图片增加了canvas操作的复杂度:必须等到图片完全加载后才能对其进行操作。浏览器通常会在页面脚本执行的同时异步加载图片。如果试图在图片未完全加载之前就将其呈现到canvas上,那么canvas将不会显示任何图片。因此,开发人员要特别注意,在呈现之前,应确保图片已经加载完毕。

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 // }) }); ```

html5 canvas 绘制base64图片失败

``` <canvas id="canvas1" ...> <!--源//--> <canvas id="canvas2" ...> <!--目的//--> <img id="testImg" src=""> <!--测试//--> ``` 场景: 2个canvas;1个img canvas1显示内容,接着将内容复制到canvas2里面。 实现: var img = canvas1Context.toDataURL('image/jpeg'); img.replace(/^data:image\/(png|jpg);base64,/, ""); myTestImg.src = img;//显示成功! var imggg = new Image(); imggg.src = img; //img.length //7259 canvas2Context.drawImage(imggg, 0, 0, 320, 480); //黑底,无图像,无报错 //png格式是白底,同样无图像

如何将页面保存为图片(兼容IE),用html2canvas.min.js 不能兼容ie

如何将页面保存为图片(兼容IE),用html2canvas.min.js 不能兼容ie

toDataURL怎么转换成成base64格式的gif图

canvas的toDataURL的方法只能保存img/png或者img/jpeg格式的,如果格式不对话默认转成img/png。如果我要把gif图转成base64码,应该怎么转才能不是只显示一帧。![图片说明](https://img-ask.csdn.net/upload/201801/02/1514894345_263350.png)![图片说明](https://img-ask.csdn.net/upload/201801/02/1514894438_354446.png)

执行动画后再设置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); } ```

openlayers ol.source.imagecanvas 怎么实现ol.source.Vector中warpx横向不断重复的效果

ol.source.imagecanvas能画出图但是只能在当前的范围展示,当地图水平拖动的时候,重复的地图区域没有显示

java swt canvas.redraw 画图问题

# java swt canvas.redraw 画图问题 最新再用Java swt做桌面应用程序。,遇到一个小问题 问题描述:在地图上标记移动物体的位置,实际上就输在canvas中的图片上画点;由于是移动物体,所以位置时时刻刻都在变动,当把当前时刻物体绘制到canvas中的时候,就需要考虑下一次绘制,这时候我用的是canvas.redraw()来重新加载地图(图片),然后再把物体的绘制上去,这个过程就是用来刷新移动物体在地图上的位置的。问题来了,按照这个方法实际上是绘制的结果一闪而过,新的位置并没有显示到redraw之后的地图上。 求大神解答! 小弟特别感谢! canvas.addPaintListener(new PaintListener(){ @Override public void paintControl(PaintEvent e) { e.gc.drawImage(image, 0, 0); drawGridLine(); } }); ``` //程序某处 使用到canvas.redraw(); for(int j=0; j<aList.size(); j++) { canvas.redraw(); Point aPoint = (Point) aList.get(j); gc.drawImage(imageDot, 0, 0, 54, 53, (int)(aPoint.getX())-5, (int)(aPoint.getY())-5, 10, 10); } ``` ```

canvas 截图,如何用下面这个函数得到图片数据。

var selectObj = null; function ImageCrop(canvasId, imageSource, x, y, width, height) { var canvas = $("#" + canvasId); if (canvas.length == 0 && imageSource) { return; } function canvasMouseDown(e) { StopSelect(e); canvas.css("cursor", "default"); } function canvasMouseMove(e) { var canvasOffset = canvas.offset(); var pageX = e.pageX || event.targetTouches[0].pageX; var pageY = e.pageY || event.targetTouches[0].pageY; iMouseX = Math.floor(pageX - canvasOffset.left); iMouseY = Math.floor(pageY - canvasOffset.top); canvas.css("cursor", "default"); if (selectObj.bDragAll) { canvas.css("cursor", "move"); canvas.data("drag", true); var cx = iMouseX - selectObj.px; cx = cx < 0 ? 0 : cx; mx = ctx.canvas.width - selectObj.w; cx = cx > mx ? mx : cx; selectObj.x = cx; var cy = iMouseY - selectObj.py; cy = cy < 0 ? 0 : cy; my = ctx.canvas.height - selectObj.h; cy = cy > my ? my : cy; selectObj.y = cy; } for (var i = 0; i < 4; i++) { selectObj.bHow[i] = false; selectObj.iCSize[i] = selectObj.csize; } // hovering over resize cubes if (iMouseX > selectObj.x - selectObj.csizeh && iMouseX < selectObj.x + selectObj.csizeh && iMouseY > selectObj.y - selectObj.csizeh && iMouseY < selectObj.y + selectObj.csizeh) { canvas.css("cursor", "pointer"); selectObj.bHow[0] = true; selectObj.iCSize[0] = selectObj.csizeh; } if (iMouseX > selectObj.x + selectObj.w - selectObj.csizeh && iMouseX < selectObj.x + selectObj.w + selectObj.csizeh && iMouseY > selectObj.y - selectObj.csizeh && iMouseY < selectObj.y + selectObj.csizeh) { canvas.css("cursor", "pointer"); selectObj.bHow[1] = true; selectObj.iCSize[1] = selectObj.csizeh; } if (iMouseX > selectObj.x + selectObj.w - selectObj.csizeh && iMouseX < selectObj.x + selectObj.w + selectObj.csizeh && iMouseY > selectObj.y + selectObj.h - selectObj.csizeh && iMouseY < selectObj.y + selectObj.h + selectObj.csizeh) { canvas.css("cursor", "pointer"); selectObj.bHow[2] = true; selectObj.iCSize[2] = selectObj.csizeh; } if (iMouseX > selectObj.x - selectObj.csizeh && iMouseX < selectObj.x + selectObj.csizeh && iMouseY > selectObj.y + selectObj.h - selectObj.csizeh && iMouseY < selectObj.y + selectObj.h + selectObj.csizeh) { canvas.css("cursor", "pointer"); selectObj.bHow[3] = true; selectObj.iCSize[3] = selectObj.csizeh; } if (iMouseX > selectObj.x && iMouseX < selectObj.x + selectObj.w && iMouseY > selectObj.y && iMouseY < selectObj.y + selectObj.h) { canvas.css("cursor", "move"); } // in case of dragging of resize cubes var iFW, iFH, iFX, iFY, mx, my; if (selectObj.bDrag[0]) { iFX = iMouseX - selectObj.px; iFY = iMouseY - selectObj.py; iFW = selectObj.w + selectObj.x - iFX; iFH = selectObj.h + selectObj.y - iFY; canvas.data("drag", true); } if (selectObj.bDrag[1]) { iFX = selectObj.x; iFY = iMouseY - selectObj.py; iFW = iMouseX - selectObj.px - iFX; iFH = selectObj.h + selectObj.y - iFY; canvas.data("drag", true); } if (selectObj.bDrag[2]) { iFX = selectObj.x; iFY = selectObj.y; iFW = iMouseX - selectObj.px - iFX; iFH = iMouseY - selectObj.py - iFY; canvas.data("drag", true); } if (selectObj.bDrag[3]) { iFX = iMouseX - selectObj.px; iFY = selectObj.y; iFW = selectObj.w + selectObj.x - iFX; iFH = iMouseY - selectObj.py - iFY; canvas.data("drag", true); } if (iFW > selectObj.csizeh * 2 && iFH > selectObj.csizeh * 2) { selectObj.w = iFW; selectObj.h = iFH; selectObj.x = iFX; selectObj.y = iFY; } drawScene(); } function canvasMouseOut() { $(canvas).trigger("mouseup"); } function canvasMouseUp() { selectObj.bDragAll = false; for (var i = 0; i < 4; i++) { selectObj.bDrag[i] = false; } canvas.css("cursor", "default"); canvas.data("select", { x: selectObj.x, y: selectObj.y, w: selectObj.w, h: selectObj.h }); selectObj.px = 0; selectObj.py = 0; } function Selection(x, y, w, h) { this.x = x; // initial positions this.y = y; this.w = w; // and size this.h = h; this.px = x; // extra variables to dragging calculations this.py = y; this.csize = 4; // resize cubes size this.csizeh = 6; // resize cubes size (on hover) this.bHow = [false, false, false, false]; // hover statuses this.iCSize = [this.csize, this.csize, this.csize, this.csize]; // resize cubes sizes this.bDrag = [false, false, false, false]; // drag statuses this.bDragAll = false; // drag whole selection } Selection.prototype.draw = function () { ctx.strokeStyle = '#666'; ctx.lineWidth = 2; ctx.strokeRect(this.x, this.y, this.w, this.h); // draw part of original image if (this.w > 0 && this.h > 0) { ctx.drawImage(image, this.x, this.y, this.w, this.h, this.x, this.y, this.w, this.h); } // draw resize cubes ctx.fillStyle = '#999'; ctx.fillRect(this.x - this.iCSize[0], this.y - this.iCSize[0], this.iCSize[0] * 2, this.iCSize[0] * 2); ctx.fillRect(this.x + this.w - this.iCSize[1], this.y - this.iCSize[1], this.iCSize[1] * 2, this.iCSize[1] * 2); ctx.fillRect(this.x + this.w - this.iCSize[2], this.y + this.h - this.iCSize[2], this.iCSize[2] * 2, this.iCSize[2] * 2); ctx.fillRect(this.x - this.iCSize[3], this.y + this.h - this.iCSize[3], this.iCSize[3] * 2, this.iCSize[3] * 2); }; var drawScene = function () { ctx.clearRect(0, 0, ctx.canvas.width, ctx.canvas.height); // clear canvas // draw source image ctx.drawImage(image, 0, 0, ctx.canvas.width, ctx.canvas.height); // and make it darker ctx.fillStyle = 'rgba(0, 0, 0, 0.5)'; ctx.fillRect(0, 0, ctx.canvas.width, ctx.canvas.height); // draw selection selectObj.draw(); canvas.mousedown(canvasMouseDown); canvas.on("touchstart", canvasMouseDown); }; var createSelection = function (x, y, width, height) { var content = $("#imagePreview"); x = x || Math.ceil((content.width() - width) / 2); y = y || Math.ceil((content.height() - height) / 2); return new Selection(x, y, width, height); }; var ctx = canvas[0].getContext("2d"); var iMouseX = 1; var iMouseY = 1; var image = new Image(); image.onload = function () { selectObj = createSelection(x, y, width, height); canvas.data("select", { x: selectObj.x, y: selectObj.y, w: selectObj.w, h: selectObj.h }); drawScene(); }; image.src = imageSource; canvas.mousemove(canvasMouseMove); canvas.on("touchmove", canvasMouseMove); var StopSelect = function (e) { var canvasOffset = $(canvas).offset(); var pageX = e.pageX || event.targetTouches[0].pageX; var pageY = e.pageY || event.targetTouches[0].pageY; iMouseX = Math.floor(pageX - canvasOffset.left); iMouseY = Math.floor(pageY - canvasOffset.top); selectObj.px = iMouseX - selectObj.x; selectObj.py = iMouseY - selectObj.y; if (selectObj.bHow[0]) { selectObj.px = iMouseX - selectObj.x; selectObj.py = iMouseY - selectObj.y; } if (selectObj.bHow[1]) { selectObj.px = iMouseX - selectObj.x - selectObj.w; selectObj.py = iMouseY - selectObj.y; } if (selectObj.bHow[2]) { selectObj.px = iMouseX - selectObj.x - selectObj.w; selectObj.py = iMouseY - selectObj.y - selectObj.h; } if (selectObj.bHow[3]) { selectObj.px = iMouseX - selectObj.x; selectObj.py = iMouseY - selectObj.y - selectObj.h; } if (iMouseX > selectObj.x + selectObj.csizeh && iMouseX < selectObj.x + selectObj.w - selectObj.csizeh && iMouseY > selectObj.y + selectObj.csizeh && iMouseY < selectObj.y + selectObj.h - selectObj.csizeh) { selectObj.bDragAll = true; } for (var i = 0; i < 4; i++) { if (selectObj.bHow[i]) { selectObj.bDrag[i] = true; } } }; canvas.mouseout(canvasMouseOut); canvas.mouseup(canvasMouseUp); canvas.on("touchend", canvasMouseUp); this.getImageData = function (previewID) { var tmpCanvas = $("<canvas></canvas>")[0]; var tmpCtx = tmpCanvas.getContext("2d"); if (tmpCanvas && selectObj) { tmpCanvas.width = selectObj.w; tmpCanvas.height = selectObj.h; tmpCtx.drawImage(image, selectObj.x, selectObj.y, selectObj.w, selectObj.h, 0, 0, selectObj.w, selectObj.h); if (document.getElementById(previewID)) { document.getElementById(previewID).src = tmpCanvas.toDataURL(); document.getElementById(previewID).style.border = "1px solid #ccc"; } return tmpCanvas.toDataURL(); } }; }

vue使用canvas做横屏手写签名功能,写完后确认生成png图片,但是无法将canvas旋转

本来打算横屏签完名,然后旋转,然后生成png图片。<br/> 但是做到旋转那一步就死了。 <br/> 在最后的**this.saveEl.addEventListener**方法里将canvas旋转 但是用了ctx.rotate 似乎没有用。。。。 求助啊求助 vue 代码 ``` <template> <div class="container"> <div class="sign-box"> <div id="canvas" ref="canvas"></div> <div class="button-box"> <div id="clearCanvas" ref="clearCanvas"> <p>清除</p> </div> <div id="saveCanvas" ref="saveCanvas"> <p>保存</p> </div> </div> </div> <div class="mySign" v-show="isSign"> <img :src="signSrc" alt /> </div> </div> </template> <script> export default { data() { return { isSign: false, signSrc: "" }; }, created() {}, mounted() { this.lineCanvas({ el: this.$refs.canvas, //绘制canvas的父级div clearEl: this.$refs.clearCanvas, //清除按钮 saveEl: this.$refs.saveCanvas //保存按钮 }); }, methods: { lineCanvas(obj) { for (var i in obj) { this[i] = obj[i]; } this.canvas = document.createElement("canvas"); this.el.appendChild(this.canvas); this.ctx = this.canvas.getContext("2d"); let size = { width: this.el.clientWidth, height: this.el.clientHeight }; this.canvas.width = size.width; this.canvas.height = size.height; this.ctx.fillStyle = "#fff"; this.ctx.fillRect(0, 0, size.width, size.height); this.ctx.strokeStyle = "#000"; //用绝对坐标来创建一条路径 this.ctx.beginPath(); //将这条线绘制到canvas上 this.ctx.stroke(); //只有调用stroke canvas 才会绘制图像显示结果 this.ctx.lineWidth = 2; this.ctx.lineCap = "round"; //开始绘制 this.canvas.addEventListener( "touchstart", function(e) { this.ctx.beginPath(); this.ctx.moveTo(e.changedTouches[0].pageX, e.changedTouches[0].pageY); }.bind(this), false ); //绘制中 this.canvas.addEventListener( "touchmove", function(e) { this.ctx.lineTo(e.changedTouches[0].pageX, e.changedTouches[0].pageY); this.ctx.stroke(); }.bind(this), false ); //结束绘制 // this.canvas.addEventListener( // "touchend", // function() { // this.ctx.closePath(); // // let imgBase64 = this.canvas.toDataURL(); // //console.log(imgBase64); // // this.signSrc= imgBase64; // // this.isSign = true; // }.bind(this), // false // ); // //清除画布 this.clearEl.addEventListener( "click", function() { this.ctx.clearRect(0, 0, size.width, size.height); }.bind(this), false ); //保存图片,直接转base64 this.saveEl.addEventListener( "click", function() { let imgBase64 = this.canvas.toDataURL(); this.signSrc = imgBase64; this.isSign = true; this.ctx.clearRect(0, 0, size.width, size.height); }.bind(this), false ); } } }; </script> <style scoped lang="less"> div.sign-box { display: flex; height: 100%; div.button-box { width: 20%; height: 100%; // border: 1px solid red; display: flex; flex-direction: column; justify-content: space-around; div { text-align: center; // border: 1px solid blue; height: 50%; overflow: hidden; p { line-height: 50vh; transform: rotate(90deg); } } } #canvas { width: 80%; height: 100%; position: relative; // background: bisque; canvas { display: block; } } } .mySign { width: 100%; border: 1px solid red; box-sizing: border-box; img { width: 100%; } } </style> ```

android 9.0 api28 canvas clipRect的 Region.Op替换

在Android9.0更新时有涉及到方法及参数的废弃,所以导致改代码在高版本上存在问题 目前使用到Region.Op的REPLACE进行画面渲染,9.0后该参数无法使用导致显示问题! ![图片说明](https://img-ask.csdn.net/upload/201905/21/1558435533_726702.jpg) 有查找过很多资料基本都是直接规避了这个问题,在27之后的Region.Op不设置该参数时默认为INTERSECT,虽然不会再报错但是渲染显示没法达到预期 效果出现问题 请问有大神能解答么,如果去替换改方法或者说如何使用别的方式实现此方法参数的效果

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?

试图清除 Android SurfaceView/Canvas 时闪烁

我想使用 canvas.drawColor(Color.BLACK) 来清除Canvas,但是如果我只调用一次,显示闪烁,显示旧的图画,这个图画应该被drawColor覆盖。 部分代码: public void update() { //This method is called by a Thread Canvas canvas = holder.lockCanvas(null); if (canvas != null) { onDraw(canvas); } holder.unlockCanvasAndPost(canvas); } @Override protected void onDraw(Canvas canvas) { if (toClear) { canvas.drawColor(Color.BLACK); //if this is not set to change back to false, it does not flicker toClear = false; } //Draw some objects that are moving around } public void clearScreen() { //This method is called when the user pressed a button toClear = true; } 我查找了关于double buffering的资料,了解到lockCanvas() 和 unlockCanvasAndPost() 可以处理这个问题。现在是哪里出错了呢?

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

今年,我也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内存模型别再傻傻分不清了

讲一讲什么是Java内存模型 Java内存模型虽说是一个老生常谈的问题 ,也是大厂面试中绕不过的,甚至初级面试也会问到。但是真正要理解起来,还是相当困难,主要这个东西看不见,摸不着。 这是一个比较开放的题目,面试官主要想考察的是对Java内存模型的了解到了什么程度了,然后根据回答进行进一步的提问 下面,我们就这个问题的回答列一下我们的思路 具体的思路如下: 说一说Java内存模型的缘由 简略辨析...

和黑客斗争的 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协议区别

立即提问
相关内容推荐