canvas | 易学教程

Save only a certain part of an HTML canvas

阅读更多关于 Save only a certain part of an HTML canvas

问题 Is it possible to save or export only a certain part of the canvas rather than the whole canvas? http://i.stack.imgur.com/hmvYh.jpg At the moment, when I save the file I get the composition plus the transparent background (light blue in example above) of the entire canvas element I have on the site. What I would like to get is only the gray region (which could be made up of several images and text elements). 回答1: Yes you can. Here is the JSFiddle. First, you need to take a clipping of the

canvas动画：气泡上升效果

阅读更多关于 canvas动画：气泡上升效果

HTML5中的canvas真是个很强大的东西呢！这几天突发奇想想做一个气泡上升的动画，经过许久的思考和多次失败，终于做出了如下效果由于是录制的gif图，看着会有点卡顿，实际演示是很自然的想要做出这种效果需要用到大量的随机数先上代码： CSS+HTML <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Title</title> <style> *{ margin: 0; padding: 0; } #canvas1{ display: block; position: absolute; bottom: 0; transition: all 0.2s ease; } </style> </head> <body> <canvas id="canvas1">您的浏览器不支持canvas</canvas> <script src="qipao.js"></script> </body> </html> JS let canvas1 = document.getElementById('canvas1'); let context1 = canvas1.getContext('2d'); let canvasH = 300; function resizeCanvas() { if

HTML Canvas: Multiple getContext plotting at same time

阅读更多关于 HTML Canvas: Multiple getContext plotting at same time

问题 I'm building a tool using websockets which allows multiple users to "draw" on each others' canvases. The user draws on a canvas, and an object containing mousedown/mouseup events and coordinates is pushed to other users instantaneously. This is then plotted on their canvases, which gives the effect of having multiple users drawing in the same place. It works as described: you can watch somebody draw something, then draw something which will appear within their canvas. The problem occurs when

HTML 5 canvas font being ignored

阅读更多关于 HTML 5 canvas font being ignored

问题 I'm trying to write some text to a canvas element, but it seems that the font options I put in are being completely ignored. No matter what I change them to, it all comes out the same, which I believe to be the default 10px sans-serif. Heres what I have (this function runs on load) function start() { canvas = document.getElementById('c'); ctx = canvas.getContext('2d'); ctx.fillStyle = "white"; ctx.font = "12px monospace"; ctx.textBaseline = "top"; } It doesn't work in either Firefox or Chrome

Html5 Canvas overlay

阅读更多关于 Html5 Canvas overlay

问题 Is there a good solution to draw a bitmap with an overlay color with canvas ? What I'm looking to do is drawing a bitmap with a unique color for all not transparent pixel. I do not find any solution for that, and it could be usefull for me ! Thank's 回答1: Live Demo One way to do it is to loop through each pixel and change the r/g/b values to the value you want it. By skipping over the alpha value it will only change the opaque pixels to the color you want. var canvas = document.getElementById(

Drawing a curved line in CSS or canvas, and moving circle along it

阅读更多关于 Drawing a curved line in CSS or canvas, and moving circle along it

问题 I was given a design today that is a circle moving along a curved line. I created a JSBin with the progress I have made so far with pure css but I feel I'm on the wrong direction. I think maybe this would be better done with canvas but I'm not sure where to begin. This is not just drawing along a line its also filling the bars. Fiddle Here is the design: Here is how close I have got so far with CSS: 回答1: Here's how to animate your circle along your curved line (which is a Cubic Bezier Curve).

html canvas motion blur with transparent background

阅读更多关于 html canvas motion blur with transparent background

问题 I just created a fancy canvas effect using cheap motion blur ctx.fillStyle = "rgba(255,255,255,0.2)"; ctx.fillRect(0,0,canvas.width,canvas.height); Now i want to do the same, but with transparent background. Is there any way to do something like that? I'm playing with globalAlpha, but this is probably a wrong way. PS: Google really don't like me today 回答1: You can create an effect like this by using globalAlpha and two different canvas objects: one for the foreground, and one for the

Drawing a wavy line in FabricJS

阅读更多关于 Drawing a wavy line in FabricJS

问题 I'm using FabricJS to create a canvas for drawing specific lines and shapes. One of the lines is a wavy line with an arrow similar to this: I've successfully created a straight version of this with an arrow endpoint but can't find any examples of how to create a wavy line. The user can draw the line as long as they want so the number of 'peaks' and 'troughs' in the line will need to adapt accordingly (a short line like the image above might have 4 peaks but a line twice the length would have

update matplotlib plot in tkinter GUI

阅读更多关于 update matplotlib plot in tkinter GUI

问题 I wanna update a matplotlib plot in a tkinter GUI. I tried to do so in the following code example. import matplotlib matplotlib.use('TkAgg') import numpy as np import matplotlib.pyplot as plt from matplotlib.backends.backend_tkagg import FigureCanvasTkAgg, NavigationToolbar2TkAgg from matplotlib.figure import Figure import tkinter as tk import tkinter.ttk as ttk import sys class Application(tk.Frame): def __init__(self, master=None): tk.Frame.__init__(self,master) self.createWidgets() def

Invalid blending results across all browsers with HTML5 canvas

阅读更多关于 Invalid blending results across all browsers with HTML5 canvas

问题 Summary When repeatedly drawing anything (apparently with a low alpha value) on a canvas, regardless of if it's with drawImage() or a fill function, the resulting colors are significantly inaccurate in all browsers that I've tested. Here's a sample of the results I'm getting with a particular blend operation: Problem Demonstration For an example and some code to play with, check out this jsFiddle I worked up: http://jsfiddle.net/jMjFh/2/ The top set of data is a result of a test that you can