canvas

2015/12/21--event,canvas

由 ≡放荡痞女 提交于 2020-01-02 07:53:29
<!DOCTYPE html> <html> <head lang="en"> <meta charset="UTF-8"> <title></title> <script type="text/javascript"> //Event事件 function showEvent(event){ alert(event.type); } function showButton(event){ if(event.button == 0){ alert("You checked the left button!"); } else if(event.button == 1){ alert("You checked the middle button!"); } else if(event.button == 2){ alert("You checked the right button!"); } else{ alert("I can't find what you checked!"); } } function showCords(event){ document.getElementById("div1").innerHTML = "x:" + event.clientX + "y:" + event.clientY; document.getElementById("div2")

canvas射击

由 ◇◆丶佛笑我妖孽 提交于 2020-01-02 07:53:09
代码描述： <!DOCTYPE HTML> <html> <head> <meta charset="utf-8"/> <title> New Document 111111111 </title> <meta name="Keywords" content=""> <meta name="Description" content=""> <style type="text/css"> #canvas{position:absolute;left:0;top:0;} </style> </head> <body> <canvas id='canvas' width=800 height=500></canvas> <script type="text/javascript"> var canvas = document.getElementById('canvas'); var context = canvas.getContext('2d'); canvas.style.backgroundColor='#EEEEFF'; document.onmousemove=move; function move(e){ } var arr=[]; var brr=[]; var crr=[]; var drr=[]; var t =null; canvas.onmousedown =

How to draw a curved line in android?

由 送分小仙女□ 提交于 2020-01-02 07:03:34
问题 I am new to Android and I am developing a sample project on drawing lines. I want to draw a curved or elevated line connecting two points (x1,y1 and x2,y2) . I tried canvas.drawArc() method, but the RectF values inside the drawArc method is just the x,y center points of circle. It is giving me an arc between my two points. But I want a curved line exactly connecting my two points. Can somebody help me? Thanks in advance. 回答1: Declare this method inside onDraw method: private void

Render SVG with external references to Canvas

由 北慕城南 提交于 2020-01-02 06:40:20
问题 I'm trying to render an SVG to canvas, using a data: URI and canvas.drawImage() . This works well, except that external images in the SVG are not included on the resulting canvas. Example HTML (live jsFiddle example): <canvas id="canvas" width="400" height="400"></canvas> <div id="container"> <svg id="mySVG" xmlns="http://www.w3.org/2000/svg" version="1.1"> <rect width="150" height="150" fill="rgb(0, 255, 0)" stroke-width="1" stroke="rgb(0, 0, 0)"/> <image preserveAspectRatio="none" xmlns

Javascript - Gecko border radius adaptation on HTML Canvas (CSS border-radius)

由 与世无争的帅哥 提交于 2020-01-02 05:35:13
问题 I'm trying to figure out how to reproduce the behavior of the "border-radius" css property into an HTML canvas. So i've already done something in Javascript in order to compute the correct borders of a given shape, using a specific radius (for each corner). Here is the previous question if needed : Gecko - CSS layout border radius - Javascript conversion I've managed to get close from the browser adaptation but there's still an issue, and it seems that it's the last, and the hard part! Let's

Java repaint not working correctly

由 回眸只為那壹抹淺笑 提交于 2020-01-02 04:39:10
问题 i use the java repaint method , it repaints, but the update is only seen when I either click on the canvas or resize the panel. How can I fix this ? What causes it? 回答1: You need to call the method revalidate(). This forces the layout manager to update / repaint all its components. 回答2: repaint() isn't actually repainting, it's just requesting a repaint of the component. 回答3: It may be helpful to simply grab the Graphics object from the component you wish to paint. Then just invoke a paint

Keep Text Vertically Centered on Canvas

由 梦想与她 提交于 2020-01-02 04:34:09
问题 The issue that I am having is keeping the text entered by a user vertically centered within the canvas element. I have built a test environment to try and solve this issue, which I have provided in this post along with a fiddle. Here is my code: HTML: Enter Your Text: <br/> <textarea id="inputtextuser" onkeyup="inputtextgo()" name="Text">Enter Your</textarea> <br/> TextBaseline: <select id="inputtextbaseline" onchange="inputtextgo()";> <option value="alphabetic">alphabetic</option> <option

canvas.toDataURL() causing a security error

由 假如想象 提交于 2020-01-02 04:25:07
问题 I'm using HTML5 canvas and the .toDataURL() function through KineticJS's .toDataURL() method. The canvas uses images that my users uploaded to the site, which are stored on a different machine and subdomain farm1.domain.com . Problem: When .toDataURL() is called, I get the error SECURITY_ERR: DOM Exception 18 Is there a way around this? I also get the same problem if the user access the page via domain.com and the image is hosted at www.domain.com . Attempt: I added the following lines to

How to deal with iOS taking upside down picture

由 做~自己de王妃 提交于 2020-01-02 04:15:09
问题 I use an input field on a website so that a user can take himself into photo. On iPad, iPhone, the resulting picture is upside down. How can I easily detect if the user used the camera so that I rotate the image via Javascript ? I use the picture in a Javascript Canvas after. I got this input field : <div class="input-field"> <label>Choose image or take a picture :</label> >input type="file" id="imageLoader" name="imageLoader" accept="image/*"/> </div> And in JS : var imageLoader; imageLoader

Unwanted lines appearing in html5 canvas using tiles

由 回眸只為那壹抹淺笑 提交于 2020-01-02 01:30:13
问题 I'm drawing a map on a canvas using squares 40px * 40px. All is well until I, by offsetting the canvas (using transform), scroll the map. Then, out of nowhere, lines apear between the tiles. See images below. Why? 回答1: This looks like floating-point positioning (e.g. you've scrolled to 100.5, 100.5) combined with bilinear filtering most browsers use to display images on the 2D canvas. Basically, if you drawImage() an image between pixels, every pixel is smoothed over two pixels, which means
订阅 canvas