canvas

Drawing overlapping semi-transparent lines without visible overlap

由 三世轮回 提交于 2020-01-20 02:44:25
问题 I'm developing a painter program using HTML5 canvas. I have created a drawing tool where the user drags and moves the mouse. I have a listener on mousemove event that draws short lines: Painter.mainCanvas.beginPath(); Painter.mainCanvas.moveTo(Painter.lastX, Painter.lastY); Painter.lastX = e.offsetX; Painter.lastY = e.offsetY; Painter.mainCanvas.lineTo(Painter.lastX, Painter.lastY); Painter.mainCanvas.stroke(); Everything works well until I set the global Alpha to < 1. When using this method

用canvas画一个加载的圆圈

由 旧街凉风 提交于 2020-01-19 19:48:52
< div class = "splash" id = "splash" > < div class = "loading-circle" id = "loadingCircle" > < p > < span id = "loadedNum" > 0 < / span > % < / p > < canvas class = "mask" id = "loadingProgress" width = "30" height = "30" > < / canvas > < canvas class = "bg" width = "30" height = "30" > < / canvas > < / div > < / div > < script > var slots = { } , c = document . getElementById ( 'loadingProgress' ) , ctx = c . getContext ( '2d' ) ; window . hasLoaded = 0 ; window . loading = false ; window . ulp = ulp ; function ulp ( percent ) { window . loading = true ; var i = 0 , draw = null ; draw =

Save/restore background area of HTML5 Canvas

由 笑着哭i 提交于 2020-01-19 14:31:52
问题 I am using HTML5 canvas as follows: Display an image that fills the canvas area. Display a black text label over the image. On click of the text label highlight it by drawing a filled red rect + white text. I have that part all working fine. Now what I want to do is remove the red rect and restore the image background that was originally behind it. I'm new to canvas and have read a fair amount, however I can't see how to do this. That said I am sure it must be quite simple. 回答1: I think there

Save/restore background area of HTML5 Canvas

由 天涯浪子 提交于 2020-01-19 14:31:33
问题 I am using HTML5 canvas as follows: Display an image that fills the canvas area. Display a black text label over the image. On click of the text label highlight it by drawing a filled red rect + white text. I have that part all working fine. Now what I want to do is remove the red rect and restore the image background that was originally behind it. I'm new to canvas and have read a fair amount, however I can't see how to do this. That said I am sure it must be quite simple. 回答1: I think there

使用canvas实现图片下载功能

由 匆匆过客 提交于 2020-01-19 14:03:46
最近项目中需要实现一个下载图片的功能(如下图) 一开始考虑使用a标签的download属性进行下载： <a href="图片src" download="下载海报"> 下载海报 </a> 但是通过测试，发现再safari中，下载的文件不能带上拓展名，所以只好换一个思路，使用canvas进行处理。 1.图片需要添加crossOrigin='anonymous'设置图像的跨域属性 img.crossOrigin = 'anonymous'; 2.使用toDataURL把图片转换成base64格式 canvas.toDataURL("image/png") 3.使用模拟点击事件，触发下载 var save_link = document.createElement('a'); save_link.href = image; save_link.download ='测试.png'; var clickevent = document.createEvent('MouseEvents'); clickevent.initEvent('click', true, false); save_link.dispatchEvent(clickevent); 完整代码： var canvas = $('.canvas'); var cxt = canvas[0].getContext("2d");

自定义view 雷达图 百分比维度图

由 戏子无情 提交于 2020-01-19 08:48:21
效果图： 具体实现 public class RadarView extends View { private static final float maxValue = 100; // 最大刻度值 private int count = 5; // 数据个数 private float angle = (float) (Math.PI * 2 / count); private Paint circlePaint; // 圆环画笔 private float radius; // 最大半径 private int centerX, centerY; // 中心点 private Paint mainCirclePaint; // 整个圆环填充画笔 private Paint graduationValuePaint; // 刻度值画笔 private String[] graduationValues = {"0", "20", "40", "60", "80", "100"}; private Paint titlePaint; // 标签画笔 private String[] titles = {"标签a", "标签b", "标签c", "标签d", "标签f"}; private double[] data = {70, 50, 67, 80, 56}; private

HTML5 Canvas: Get Event when drawing is finished

由 扶醉桌前 提交于 2020-01-19 05:37:59
问题 I'm drawing an image to a canvas element. I then have code that depends on this process to be finished. My code looks like this: var myContext = myCanvasElement.getContext('2d'), myImg = new Image(); myImg.onload = function() { myContext.drawImage(containerImg, 0, 0, 300, 300); }; myImg.src = "someImage.png"; So now, I would like to be notified when drawImage is done. I checked the spec but I couldn't find either an event or the possibility to pass a callback function. So far I just set a

canvas转盘转动?

由 拈花ヽ惹草 提交于 2020-01-19 01:06:56
怎么实现类似转盘转动的效果？ 现在这种实现思路是，canvas每次draw()并不是让图形在旋转，而是让每一份的颜色改变到达好像是转动的效果， 但是现在有一个问题，一开始渲染的颜色数量于份数是相同的，但是随着转动的开始，颜色会减少1种，成为数量 - 1的颜色总数。 问题应该是出在这儿了，做的处理是如果索引是最后一个，那么将第1个颜色赋值给他，想法是对的，但是忽略了当前第一个元素的颜色已经改变了，并不是原来之前的颜色，需要赋的值是索引为0未赋值之前的颜色，所以需要把第一个颜色缓存起来来然后再给最后赋值。 循环的是新数组。 来源： https://www.cnblogs.com/aloneCode/p/10244346.html

jcanvas 使用

由 点点圈 提交于 2020-01-18 13:24:23
jcanvas 是处理canvas操作的jquery插件 官网 文字 $("#canvas").drawText({ text: 'Canvas is fun', fontFamily: 'cursive', fontSize: 40, x: 290, y: 150, fillStyle: 'lightblue', strokeStyle: 'blue', strokeWidth: 1 }); 画弧形 $('#canvas').drawArc({ fillStyle: 'black', x: 100, y: 100, radius: 50 }).drawArc({ fillStyle: '#36b', x: 300, y: 150, radius: 50 }); 画椭圆 $('#canvas').drawEllipse({ fillStyle: '#000', x: 200, y: 100, width: 200, height: 100}) 旋转画布，x和y是旋转中心 $('canvas').rotateCanvas({ rotate: 45, x: 100, y: 100 }) 缩放图层 $('canvas').scaleCanvas({ x: 100, y: 100, scaleX: 1.5, scaleY: 3 }) .drawArc({ fillStyle: '#000'

浪漫表白心形花瓣动图

由 ↘锁芯ラ 提交于 2020-01-18 01:10:45
创建工具类MyUtil public class MyUtil { public static float circle = (float) (2 * Math.PI); public static int rgba(int r, int g, int b, int a) { return Color.argb(a, r, g, b); } public static int randomInt(int min, int max) { return (int) Math.floor(Math.random() * (max - min + 1)) + min; } public static float random(float min, float max) { return (float) (Math.random() * (max - min) + min); } //产生随机的argb颜色 public static int randomrgba(int rmin, int rmax, int gmin, int gmax, int bmin, int bmax, int a) { int r = Math.round(random(rmin, rmax)); int g = Math.round(random(gmin, gmax)); int b = Math
订阅 canvas