canvas

Drawing an svg containing html in a canvas with safari

由 左心房为你撑大大i 提交于 2020-01-12 14:14:22
问题 I'm trying to create some thumbnails of dynamically created pages for a website, i have found a solution by adding the html in a svg which I then draw on an image inside a canvas that I resize after the image has been drawn. This solution works in firefox and chrome but not in safari, the svg doesn't seem to be drawn I just get a blank page. I don't get any error even if i put some try catch and I couldn't find a solution on the web. My html is just a basic test page with a canvas, I tried to

Canvas图形绘画标签

由 巧了我就是萌 提交于 2020-01-12 13:54:32
Canvas图形绘画标签 canvas定义 canvas标签用来定义图形，是一个图形容器，常常用来进行绘图操作，要与js搭配使用。 创建一个画布容器 width,height定义画布容器大小 < canvas id = " myCanvas " width = " 500 " height = " 400 " style =" border : 1px solid #000 " > </ canvas > canvas本身没有绘图能力，绘图操作要在js里进行 通过js获取canvas元素对象 var canvas = document.getElementById("myCanvas") 创建context对象，context对象拥有多种绘制方法，一般通过调用获取的canvas元素对象下的方法 var cxt = canvas.getContext("2d") 实例线条 //开始一条路径 ctx.beginPath(); //将画笔移动到指定起始坐标点上 ctx.moveTo(100,100); //添加一个点，创建从上一个点到该点的线条 ctx.lineTo(300,100); ctx.lineTo(100,200); //创建起始坐标点到最终坐标点的路径 ctx.closePath(); //执行绘制 ctx.stroke(); 实例矩形 rect(x,y,width

KineticJS - Scaling stage to viewport

由 流过昼夜 提交于 2020-01-12 10:16:10
问题 I'm working towards a default resolution of 1366x756. I would to scale this up and down depending on the viewport. Similar to the example shown here: http://blogs.msdn.com/b/davrous/archive/2012/04/06/modernizing-your-html5-canvas-games-with-offline-apis-file-apis-css3-amp-hardware-scaling.aspx I'm kind of confused how I would get this to work in KineticJS as it abstracts away the canvas elements used. What I would like to achieve is basically: window.addEventListener("resize", OnResizeCalled

How to set 2 fonts for HTML5 canvas context?

由 删除回忆录丶 提交于 2020-01-12 10:00:27
问题 I'm trying to get the Canvas to use two fonts when drawing text. This is because my main font is Comic Sans MS (It's a kids app). Since I can't find Comic Sans on iPad, I'm trying to substitute it with MarkerFelt-Thin. I've tried to use several variations of the following statement: ctx.font = "40pt MarkerFelt-Thin; 40pt Comic Sans MS"; Doesn't seem to be working. So at the moment I'm using user agent detection and manually assigning different fonts for each user agent. Anyone know the right

C# Drag & Drop Multiple Images within Canvas

由 断了今生、忘了曾经 提交于 2020-01-12 09:40:39
问题 I've got the following code to drag and drop images inside my Canvas: img.AllowDrop = true; img.PreviewMouseLeftButtonDown += this.MouseLeftButtonDown; img.PreviewMouseMove += this.MouseMove; img.PreviewMouseLeftButtonUp += this.PreviewMouseLeftButtonUp; private object movingObject; private double firstXPos, firstYPos; private void MouseLeftButtonDown(object sender, MouseButtonEventArgs e) { // In this event, we get the current mouse position on the control to use it in the MouseMove event.

C# Drag & Drop Multiple Images within Canvas

由 懵懂的女人 提交于 2020-01-12 09:37:59
问题 I've got the following code to drag and drop images inside my Canvas: img.AllowDrop = true; img.PreviewMouseLeftButtonDown += this.MouseLeftButtonDown; img.PreviewMouseMove += this.MouseMove; img.PreviewMouseLeftButtonUp += this.PreviewMouseLeftButtonUp; private object movingObject; private double firstXPos, firstYPos; private void MouseLeftButtonDown(object sender, MouseButtonEventArgs e) { // In this event, we get the current mouse position on the control to use it in the MouseMove event.

Is it possible to draw on multiple canvases at once?

由 狂风中的少年 提交于 2020-01-12 08:28:09
问题 All of my canvas drawing functions start something like this: function drawMe(){ var canvas = document.getElementById('canvas-id'); var ctx = null; ctx = canvas.getContext('2d'); ... } However I now want to draw the same image on a (variable) number of canvases, is there some alternative to getElementById() (perhaps in jQuery?) which can be used to easily grab more than one at once? Thanks! Josh 回答1: drawing to multiple canvases will be extremely inefficient, because rendering is one of most

Using Layout resources in a LiveWallpaper on Android

由 假如想象 提交于 2020-01-12 05:47:08
问题 When you create a LiveWallpaper in Android 2.2+ you get a canvas (or whatever the 3D equivalent is) to draw on. I'd like to draw some elements using the built-in Android UI tools rather than building everything from scratch using canvas commands or a loading a pre-rendered UI bitmap. Converting a single View to a Bitmap works fine. i.e. this works great: // For example this works: TextView view = new TextView(ctx); view.layout(0, 0, 200, 100); view.setText("test"); Bitmap b = Bitmap

How can I load an image onto the HTML5 Canvas using Phonegap

由 ♀尐吖头ヾ 提交于 2020-01-12 03:56:11
问题 Trying to load an image into onto an html5 canvas and then running the html5 on Android using Phonegap. Here is my HTML. <!DOCTYPE HTML> <html> <body> <canvas id="myCanvas" width="200" height="100" style="border:1px solid #c3c3c3;"> Your browser does not support the canvas element. </canvas> <script type="text/javascript"> var c=document.getElementById("myCanvas"); var cxt=c.getContext("2d"); var img=new Image() img.src="img_flwr.png" cxt.drawImage(img,0,0); </script> <img src="img_flwr.png"/

Canvas + JS 实现简易的时钟

由 一世执手 提交于 2020-01-11 23:27:23
之前学习了下html5中的canvas元素，为了练练手就实现了一个简易的时钟。时钟本身并不复杂，也没有使用图片进行美化，不过麻雀虽小五脏俱全，下面就与大家分享一下： 实现效果： html代码： <!DOCTYPE html> <html> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <title>Clock</title> <style type="text/css"> *{ margin: 0; padding: 0; } .canvas{ margin-left: 20px; margin-top: 20px; border: solid 1px; } </style> </head> <body onload= "main()"> <canvas class = "canvas" id="canvasId" width = '500px' height = '400px'></canvas> <script type= "text/javascript" src = "Clock.js"></script> </body> </html> JS代码: var Canvas = {}; Canvas.cxt = document.getElementById(
订阅 canvas