canvas

Android canvas setShadowLayer greatly decreases performance

由 |▌冷眼眸甩不掉的悲伤 提交于 2020-01-10 05:14:26
问题 I'm writing a canvas app on android and I'm looking to add shadows, but I've noticed a great slow-down when I add them to my paint object. My code is simple it looks like this: ... Paint paint = new Paint(); paint.setShadowLayer(8.f, 0, 0, 0xff000000); // this line makes terribly slow drawing canvas.drawRect(left, top, right, bottom, paint); How can I make this faster? 回答1: While digging around to find a way to speed up my large text shadows, I stumbled on this question and answer:

HTML5, JavaScript and drawing multiple rectangles in a canvas

由 ﹥＞﹥吖頭↗ 提交于 2020-01-10 03:49:33
问题 Why won't my multiple rectangles draw in the canvas? <!DOCTYPE html> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <title></title> <script src="Scripts/jquery-1.9.1.min.js"></script> </head> <body> <canvas id="myCanvas" width="500" height="500" style="border:1px solid red"> <p>Your browser doesn't support canvas.</p> </canvas> </body> </html> <script type ="text/javascript"> function Shape(x, y, w, h, fill) { this.x = x; this.y = y; this.w = w; this.h = h; this.fill = fill; } // get

Can you have multiple clipping regions in an HTML Canvas?

由 情到浓时终转凉″ 提交于 2020-01-09 23:46:15
问题 I have code that loads a bunch of images into hidden img elements and then a Javascript loop which places each image onto the canvas. However, I want to clip each image so that it is a circle when placed on the canvas. My loop looks like this: $$('#avatars img').each(function(avatar) { var canvas = $('canvas'); var context = canvas.getContext('2d'); var x = Math.floor(Math.random() * canvas.width); var y = Math.floor(Math.random() * canvas.height); context.beginPath(); context.arc(x+24, y+24,

Can you have multiple clipping regions in an HTML Canvas?

由 ☆樱花仙子☆ 提交于 2020-01-09 23:44:21
问题 I have code that loads a bunch of images into hidden img elements and then a Javascript loop which places each image onto the canvas. However, I want to clip each image so that it is a circle when placed on the canvas. My loop looks like this: $$('#avatars img').each(function(avatar) { var canvas = $('canvas'); var context = canvas.getContext('2d'); var x = Math.floor(Math.random() * canvas.width); var y = Math.floor(Math.random() * canvas.height); context.beginPath(); context.arc(x+24, y+24,

extract path from text html canvas

由 杀马特。学长 韩版系。学妹 提交于 2020-01-09 19:54:06
问题 Is there anyway to extract a path from text letter(s) in html 5, then grab (x,y) coordinates along that path so that the letter(s) can be formed by circles along that letter(s) path? I would like to take the x,y coordinates and apply a shape at their location so that it resembles the string of text in a "pixelated" format followed by some animating effects. Any advice on getting some kind of x,y coordinates along a path of characters on a canvas would be great. edit: I am essentially trying

Animate a Canvas circle to draw on load

由 丶灬走出姿态 提交于 2020-01-09 19:36:33
问题 OK Hello. I've decided to start using HTML canvas for a small project I have. There's no real start yet. I'm just learning the basics of Canvas and I want to Animate a circle <!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title>title</title> <style> body { margin: 0px; padding: 0px; background: #222; } </style> <link rel="stylesheet" href="style.css" type="text/css"> </head> <body> <canvas id="myCanvas" width="578" height="250"></canvas> <script> var canvas = document.getElementById(

Animate a Canvas circle to draw on load

由 女生的网名这么多〃 提交于 2020-01-09 19:35:52
问题 OK Hello. I've decided to start using HTML canvas for a small project I have. There's no real start yet. I'm just learning the basics of Canvas and I want to Animate a circle <!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title>title</title> <style> body { margin: 0px; padding: 0px; background: #222; } </style> <link rel="stylesheet" href="style.css" type="text/css"> </head> <body> <canvas id="myCanvas" width="578" height="250"></canvas> <script> var canvas = document.getElementById(

用Tcl/Tk脚本计算圆周率

由 你说的曾经没有我的故事 提交于 2020-01-09 17:29:37
读了阮一峰的 蒙特卡罗方法入门 ，用概率统计的方式求解棘手的数学问题还挺有意思的,尤其是利用正方形和它的内切圆之间的面积关系来建模求解圆周率的方法精巧又简单，比投针实验好理解也好实现多了。建模可不是Matlab或者MAST/VHDL语言的专利，既然tcl/tk语言也有内置的随机数产成函数 rand() ,那么我用tcl/tk建模计算圆周率也应该不在话下。 建模思想 正方形的内切圆与该正方形的面积之比是π/4。 图片和公式引用自阮一峰的 蒙特卡罗方法入门 在这个正方形内部，随机产生足够多的点，计算它们与中心点的距离，判断是否落在圆的内部。如果这些点均匀分布，那么圆内的点应该占到所有点的 π/4，因此将这个比值乘以4，就是π的值。 脚本实现 tcl/tk内置math函数库的rand()方法可以随机生成0～1的浮点数，假设圆的半径为整数r,可以用以下方式产生(0,r)区间的随机整数: set value [ int [ expr rand () * $r ]] 为了计算简便，可以把模型进一步简化，只计算第一象限内的点落入圆内的比例。为了观察tcl/tk的 rand() 函数是否真的随机，我又多加了几行tk代码，把所有的点都显示出来。下面的代码中正方形的边长为300,随机产生300*300个点，理想情况下如果随机点100%均匀分布，那么每个点应该恰好对应一个像素,画布会一片漆黑。 tcl

canvas画八卦图

由 蹲街弑〆低调 提交于 2020-01-09 15:48:06
methods:{ getapp(){ var canvas=document.getElementById('wholeCanvas') this.canvas2d=canvas.getContext('2d') canvas.width = 1000; canvas.height = 800; //左边 this.canvas2d.beginPath(); this.canvas2d.lineWidth=1 this.canvas2d.strokeStyle="black"; this.canvas2d.fillStyle="black" this.canvas2d.arc(500,350,200,Math.PI*1.5,Math.PI*0.5,true); //参数（x,y,半径r,起始位,终止位,顺、逆时针） this.canvas2d.stroke(); this.canvas2d.fill() this.canvas2d.closePath(); //右边 this.canvas2d.beginPath(); this.canvas2d.lineWidth=1 this.canvas2d.strokeStyle="black"; this.canvas2d.arc(500,350,200,Math.PI*0.5,Math.PI*1.5,true); //参数（x,y

All html canvas shapes are given the color of the last object added

由 谁说我不能喝 提交于 2020-01-09 11:46:08
问题 I was trying to do an Olympic type flag, purely as a way of learning how to draw in JavaScript. This should draw two circles - one blue, one black... Here is the code (which I apologise for, been moving things between the two functions - Not sure how to refer to the context non-explicitly): function drawCircle(ctx,x,y,radius, color){ var startAngle = 0; var endAngle = (Math.PI*2); var clockwise = true; ctx.fillStyle = color; ctx.arc(x,y,radius,startAngle,endAngle, clockwise); ctx.fill(); ctx
订阅 canvas