canvas

canvas 水波效果

由 落爺英雄遲暮 提交于 2019-12-25 22:45:56
看到某些工具上有水波效果，想能不能用canvas实现呢，于是就google了一下还真有在这里与大家分享吧！ 这里有一篇教程，介绍实现原理的， 水波纹原理 下面是js实现的源代码 var ripple = (function(img_src, container){ var img = new Image, img_data, delay = 30, width, height, half_width, half_height, riprad = 5, oldind, newind, mapind, size, ripplemap = [], last_map = [], ripple, ripple_data, texture, texture_data, is_running = true, is_disturbed = false, timer_id, canvas = document.createElement('canvas'), /** @type {CanvasRenderingContext2D} */ ctx; function init(){ width = img.width; height = img.height; half_width = width >> 1; half_height = height >> 1; size = width *

How to unBlur square portion of Blurry image on touch android

由 半城伤御伤魂 提交于 2019-12-25 20:37:10
问题 What I want to do: On mouse hover of Blurry image, it shows unblur same image in square shape like following image. (image is completely blur, on mouse hover unblur image shown in square shape) What I have done: I set blur image using following code (link) using PorterDuff.Mode. On touch of screen mouse pointer converted into square and image shows unblur. Edit: Problem: Now picture is unblur but i cant find proper blur effect on blurry image and unblur image is also not clear, on touch is

How to implement a scrolling texture in WebGL?

由 懵懂的女人 提交于 2019-12-25 20:05:25
问题 I have gone through this as a example on how to render a normal texture to a canvas using WebGL and successfully implemented it. Now I am trying to implement a scrolling image where I am getting line by line pixel data from another machine in the same network via Ajax Polling or Websockets and have to render the same using WebGL to canvas. So, now I know we can easily render 60 frames per second which means if I get 50 lines of pixel data per second from another computer in the network ,I

How to implement a scrolling texture in WebGL?

由 不羁岁月 提交于 2019-12-25 20:03:31
问题 I have gone through this as a example on how to render a normal texture to a canvas using WebGL and successfully implemented it. Now I am trying to implement a scrolling image where I am getting line by line pixel data from another machine in the same network via Ajax Polling or Websockets and have to render the same using WebGL to canvas. So, now I know we can easily render 60 frames per second which means if I get 50 lines of pixel data per second from another computer in the network ,I

Canvas上drawText的进阶

由 我只是一个虾纸丫 提交于 2019-12-25 19:18:52
【推荐】2019 Java 开发者跳槽指南.pdf(吐血整理) >>> 前言 使用Canvas的drawText绘制文本是不会自动换行的，即使一个很长很长的字符串，drawText也只显示一行，超出部分被隐藏在屏幕之外。 那么TextView这样的控件是如何处理这个问题的呢？实际上，他会利用一个叫做Layout的辅助类。 Layout https://developer.android.com/reference/android/text/Layout “A base class that manages text layout in visual elements on the screen.” 一个用于管理 text 显示在屏幕上时视觉效果的类 Layout是一个虚类，不过还是提供了一个非常重要的静态方法 float getDesiredWidth (CharSequence source, TextPaint paint) 用于计算source显示需要多长的宽度。 StaticLayout和DynamicLayout 该两个类都是Layout的子类，无论从构造方法和成员方法上都几乎一样，他们的区别我们在下面介绍，以StaticLayout为例，我们来了解下这个东西到底是用来干嘛的。 StaticLayout 是android中处理文字换行的一个工具类，

How to make a copy of a sprite on an HTML5 canvas?

由 流过昼夜 提交于 2019-12-25 19:03:13
问题 I'm trying to make a 2-D platformer-style game using javascript and an HTML5 canvas. While working on the random level generation I stumbled into a problem. I have the sprites working fine, but when I try to load the next platform the old one disappears. I figured that this problem would be solved if I copied the image, but I don't know how. I tried searching it up on google but most sites I went to weren't very understandable or were related to a different problem. Can you please help out?

Adding Child Image to Canvas with settings in WPF C#

由 旧城冷巷雨未停 提交于 2019-12-25 18:53:45
问题 I have a canvas control within my main window that when a button is clicked adds an image (from path) to the canvas. When these images are added I need to be able to drag these around, which I can do when these are added via xaml with mouseMove etc, but due to click event handler is done in C#, how do I add these settings in C# using xaml to drag etc - not ideal for dynamic adding image/shapes <!-- see below for drag functionality --> <!-- //these are the xaml settings //MouseLeftButtonDown =

Canvas toDataURL() returns blank image

由 扶醉桌前 提交于 2019-12-25 17:44:27
问题 I'm using glfx.js to edit my image but when I'm trying to get that image's data using the toDataURL() function I get a blank image (width the same size as the original image). The strange thing is that in Chrome the script works perfect. What I want to mention is that the image is loaded in canvas using the onload event: img.onload = function(){ try { canvas = fx.canvas(); } catch (e) { alert(e); return; } // convert the image to a texture texture = canvas.texture(img); // draw and update

how to save canvas for gradient background php/html5?

由 大憨熊 提交于 2019-12-25 17:07:18
问题 I am trying to saving gradient linear background. I am using a plugin of https://github.com/niklasvh/html2canvas/releases. The code is working for solid background color and images but not when I use css background-linear-gradient. and how can i save this canvas image? //EDITED: I have another bug I would like to save data which is loading from database, so i am looping between the database and showing content. How can i save the pictures one by one showing the content? 回答1: In the browser

HTML Canvas & Javascript - Emulating a Scroll-On-Hover Event

由 柔情痞子 提交于 2019-12-25 16:59:14
问题 I am trying to write a scroll-on-hover function in an HTML canvas by defining a hover variable, detecting mouse events over the designated hover area and (on doing so) adding or subtracting to this hover variable depending on which area is hovered over. This hover variable is connected to the position of a series of selection buttons which, for the purposes of this example, contain the numbers 0 to 30. When either end of this series of selection buttons is hovered over they all move up or
订阅 canvas