html5-canvas

问题 I'm using this in my app: http://www.html5canvastutorials.com/labs/html5-canvas-drag-and-drop-resize-and-invert-images/ have use anchors for resizing the image .. What I want is to resize the image and keep its ratio maintained. I don't want it to stretch I'm able to achieve that using this peace of code.:.. if(width) { image.setSize(width); } But this is screwing up the anchors .. Anyone ever tried something like this.. 回答1: I know this is a horribly old post but I needed to implement this

问题 As a follow up to this question and answer...I have another issue to solve: When I draw on a canvas and then apply some transformations like rotation, I would like to keep what was drawn and continue the drawing. To test this, use the mouse to draw something and then click "rotate". This is what I'm trying, but the canvas gets erased. JS //main variables canvas = document.createElement("canvas"); canvas.width = 500; canvas.height = 300; canvas.ctx = canvas.getContext("2d"); ctx = canvas.ctx;

问题 When you have a canvas element set to hasControls little controls render when the user clicks the element. These controls are little canvas squares. I would like to overlay little lines on the square controls to give a further polish to look and feel. 回答1: override fabric Object _drawControl function: fabric.Object.prototype._drawControl = function(control, ctx, methodName, left, top) { if (!this.isControlVisible(control)) { return; } var size = this.cornerSize; this.transparentCorners || ctx

问题 When you have a canvas element set to hasControls little controls render when the user clicks the element. These controls are little canvas squares. I would like to overlay little lines on the square controls to give a further polish to look and feel. 回答1: override fabric Object _drawControl function: fabric.Object.prototype._drawControl = function(control, ctx, methodName, left, top) { if (!this.isControlVisible(control)) { return; } var size = this.cornerSize; this.transparentCorners || ctx

问题 When you have a canvas element set to hasControls little controls render when the user clicks the element. These controls are little canvas squares. I would like to overlay little lines on the square controls to give a further polish to look and feel. 回答1: override fabric Object _drawControl function: fabric.Object.prototype._drawControl = function(control, ctx, methodName, left, top) { if (!this.isControlVisible(control)) { return; } var size = this.cornerSize; this.transparentCorners || ctx

问题 I am trying to put an image on a canvas. I read the following tutorial https://developer.mozilla.org/en-US/docs/Web/Guide/HTML/Canvas_tutorial/Using_images and tried to do something similar to it my canvas is <canvas id="canvas" width="400" height="400"></canvas> and I have created the function function putImage(){ var img = new Image(); img.src = "./path.png"; var ctx = document.getElementById('canvas').getContext('2d'); ctx.drawImage(img,8,8); } but the image is not appearing on the canvas.

问题 created the sphere and the plane geometry when i ignore the sphere form scene.add() interesect work but here is the code.. http://jsfiddle.net/praveenv29/PZeY4/ for ( var i = 0; i<10; i ++ ) { var gloom = new THREE.ImageUtils.loadTexture('../map_pin.png' ); materialr = new THREE.MeshLambertMaterial( { color:Math.random() * 0xffffff ,side: THREE.DoubleSide} ) var geometry = new THREE.PlaneGeometry(10,15,2, 2); var object = new THREE.Mesh(geometry, materialr); object.position.x = Math.random()

问题 This wonderful answer details how to include icons from FontAwesome in a HTML canvas. Adapting the code for icon font from Material Design doesn't work, however. All the code is the same except for replacing FontAwesome values for Material Design values. Code below. Codepen: https://codepen.io/Crashalot/pen/dyyEPWV 1) How do you incorporate icons from Material Design in HTML canvas? 2) How do you incorporate icons from any icon font (e.g., https://github.com/framework7io/framework7-icons)?

问题 I'd like to be able to extract frames from YouTube videos at various points within them (not just at the thumbnails), and do some processing on them. I can embed the video in my website using the iframe API, but I am struggling to find a way to capture that to a canvas. (It's ok if I am forced to capture the entire screen, and ok if I have to make changes to browser settings to allow it.) 回答1: One option would be to write a browser extension. But I would guess you would want to avoid that.

问题 Is it possible to write image on canvas and write text with background? For example like this: 回答1: How text works in canvas Unfortunately no, you can't produce text with background with the text methods - only fill or outline the text itself. This is because the glyphs from the typeface (font) are converted to individual shapes or paths if you want, where the background of it would be the inner part of the glyph itself (the part you see when using fill). There is no layer for the black-box