canvas | 易学教程

How to check if something is drawn on canvas

阅读更多关于 How to check if something is drawn on canvas

问题 How do I check if there is data or something drawn on a canvas? I have this <canvas id="my-canvas"></canvas> element, and I want to check if my canvas has something drawn on it. 回答1: Instead of checking every single pixel, it may be much more efficient to merely record every time the canvas gets filled or stroked. Once a fill or stroke or has happened, then you know that something has been drawn. Of course 'how' is very application specific, since we don't know how your canvas is getting

How put percentage width into html canvas (no css)

阅读更多关于 How put percentage width into html canvas (no css)

问题 I have an image and have overlaid a canvas on top of it so that I can draw 'on' the image without modifying the image itself. <div class="needPic" id="container"> <img id="image" src=""/>  <canvas id="sketchpad" width="70%" height="60%">Sorry, your browser is not supported.</canvas> </div> I can specify the width and height in pixels in the above canvas line and it works great, however I need this to dynamically sized based on screen size (has to work

HTML5 Canvas ctx.clip() method used on a circle leaves a line underneath the circle

阅读更多关于 HTML5 Canvas ctx.clip() method used on a circle leaves a line underneath the circle

问题 I've created a program to generate planet sprites. I'm doing that by creating a circular path, running ctx.clip() to keep all the following layers inside of the circle, then drawing a black and transparent texture layer, then a randomly colored rectangle over the full canvas, then a shadow and glow on top of it all. The issue is that a colored line also appears under the circle after clipping, and I'm not sure why. I need this removed. Here is a fiddle. The last line sets the code to loop

Image zoom centered on mouse position

阅读更多关于 Image zoom centered on mouse position

问题 I am writing a script with Fabric.js to zoom an image at the current mouse position. I have made some progress but there is an error somewhere. Case 1 : Keep the mouse at one point and zoom with the mouse wheel. Result: Works perfectly, image zooms at that particular pixel. Case 2: Zoom in a little at one position (3-5 times with mouse wheel), then move the mouse to a new position and zoom in there. Result: Works fine for the first point, but after moving to another point and zooming, the

HTML5 Canvas and Line Width

阅读更多关于 HTML5 Canvas and Line Width

问题 I'm drawing line graphs on a canvas. The lines draw fine. The graph is scaled, every segment is drawn, color are ok, etc. My only problem is visually the line width varies. It's almost like the nib of a caligraphy pen. If the stroke is upward the line is thin, if the stroke is horizontal, the line is thicker. My line thickness is constant, and my strokeStyle is set to black . I don't see any other properties of the canvas that affect such a varying line width but there must be. 回答1: Live Demo

How to create an h264 video with an alpha channel for use with HTML5 Canvas?

阅读更多关于 How to create an h264 video with an alpha channel for use with HTML5 Canvas?

问题 I've been interested in this demo: http://jakearchibald.com/scratch/alphavid/ I also saw this question on here: Can I have a video with transparent background using HTML5 video tag? But I can't seem to figure out: How do you create h264, ogg and webm video files with alpha channels? 回答1: If you open this video from your demo with QuickTime you will see a video with separate RGB and A regions: If you then look at the code for the demo, you will see that it is using one offscreen HTML5 Canvas

绘制系列（十八）图形篇-Bitmap

阅读更多关于绘制系列（十八）图形篇-Bitmap

图像与图形处理 Canvas中就保存着一个Bitmap对象，调用canvas的各种绘图函数，最终还是绘制到其中的Bitmap上。我们自定义View是，一般都会重写onDraw(Canvas canvas),这个函数中是自带Canvas的，只需要将画的内容调用Canvas的函数画出来，就会直接显示在对应的View上。其实，View对应着一个Bitmap，而onDraw()中canvas就是通过这个Bitmap创建出来的。 Android中：图片除了.png、.jpg等格式位图，还用资源文件中定义的Drawable对象。 1、Bitmap bitmap被称为位图，一般位图的文件格式扩展名为.bmp,作为一种逐像素显示的对象，由一个个像素点组成；因为由一个个像素组成，肯定涉及到两个问题：如何存储每个像素相关的像素点之间能否压缩 1.1、Bitmap在绘图中使用转换为BitmapDrawable对象使用 BitmapDrawable drawable=new BitmapDrawable(bitmap); iv.setImageDrawable(drawable); 当做画布使用方式一：使用默认画布 onDraw(Canvas canvas)和dispatchDraw(Canvas canvas)中的Canvas对应这一个Bitmap对象，所有的绘图都是显示这个Bitmap上的

HTML2canvas generates Blurry images

阅读更多关于 HTML2canvas generates Blurry images

问题 I am using jsPDF and it uses html2canvas to generate an image from some html element and insert on the .pdf file. But there is a problem on html2canvas, it generates blurry images from the html. See example below: HTML content: http://puu.sh/7SZz4.png html2canvas generated image: http://puu.sh/7SZAT.png Is there any way to fix it or is there any better option to get the image form html? thanks! 回答1: you can use scale options in html2canvas. In the latest release, v1.0.0-alpha.1, you can use

Why does HTML Canvas getImageData() not return the exact same values that were just set?

阅读更多关于 Why does HTML Canvas getImageData() not return the exact same values that were just set?

问题 When writing pixels to an HTML Canvas context using putImageData I find that the pixel values are not exactly the same when I fetch them again. I have put up a sample test page showing the problem. Boiled down, the problem is: var id = someContext.getImageData(0,0,1,1); id.data[0]=id.data[3]=64; // 25% red, 25% alpha id.data[1]=id.data[2]=0; // No blue or green someContext.putImageData(id,0,0); var newData = someContext.getImageData(0,0,1,1); console.log( newData.data[0] ); On Chrome v8, the

Tainted Canvas, due to CORS and SVG?

阅读更多关于 Tainted Canvas, due to CORS and SVG?

问题 Iknow this has been asked often before, but after 3days trying to fix this i clearly need help. I've had a problem for a while now. I been trying to do something like this (This is a simplified code): var media = Array(); $(document).ready(function(){ img = new Image(); img.crossOrigin = "*"; img.src = "http://domain.com/pics/picture.svg"; img.width = 200; img.height = 300; img.onload = function(){ media['test'] = img; ///var layer = img; $.jCanvas({ fromCenter: false }); $("#collider")