html5-canvas

问题 I recognize that Canvas drawImage is inexplicably offset by 1 Pixel is a very similar issue, but I was already applying the advice given in that question's answer before I even came across this problem. I'm implementing a sprite sheet system for an HTML5-based game. Individual frames are defined simply: frame = new AnimationFrame(img, x, y, w, h); Inside the AnimationFrame constructor, all of the numeric parameters are truncated to integers. Then when I go to draw it on the canvas, I use what

问题 I'm developing a HTML5 Canvas game using EaselJS and I've written a function that allows me to create "blocks" just by setting one or more images, size and position. and by "blocks", what I mean is: I'm doing this using two methods: First method: With this method the blocks are created in the available space inside the location I've set, using the images randomly. Second method: The blocks are created inside the location I've set using specific images for the top left corner, top side, top

问题 When PDF.js processes a PDF to HTML5, it lays a <canvas> over all the <div> elements containing the text. This canvas is a proper render of the PDF, while the text underneath is quite rough (but sufficient for certain purposes such as searching for words). Using the PDF.js demo page, I can make the underlying text visible by: Deleting the <canvas> element. Disabling the color: transparent property on the .textLayer class, which acts upon the underlying text. ... However, the text remains low

问题 I'm playing with file upload, drag and drop, and canvas, but for some reason the ondrop function never seems to run, here's the fiddle I'm working in: http://jsfiddle.net/JKirchartz/E4yRv/ the relevant code is : canvas.ondrop = function(e) { e.preventDefault(); var file = e.dataTransfer.files[0], reader = new FileReader(); reader.onload = function(event) { var img = new Image(), imgStr = event.target.result; state.innerHTML += ' Image Uploaded: <a href="' + imgStr + '" target="_blank">view

问题 If have an image which is 1024x1250 and a canvas element that is 600x800, I can draw the image to the canvas centered such that the canvas is essentially a smaller view port of the larger image. I then want to allow that center point to move, thus creating the illusion that the viewport is viewing a different portion of the image. Right now I've done this in sort of a hokey way where I redraw the portion of the image I want to see to the canvas, but I get this feeling that this isnt optimal.

问题 Is there a way to antialiase image that added to canvas using fabric.js I'm having trouble to do this with scaleToHeight function. I couldn't find any suitable option in fabric library. var canvas = new fabric.Canvas('canvas'); var url = 'https://grafikoan.files.wordpress.com/2012/10/spheres-grafic-design-grafikoan-hd-300-p-2.png'; fabric.Image.fromURL(url, function (oImg) { oImg.scaleToHeight(canvas.getHeight()); canvas.add(oImg); canvas.renderAll(); }); <script src="http://cdnjs.cloudflare

问题 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

问题 I have created canvas element. Once user add some text with the help of keyboard, on click of done button I want to add text on canvas. I did below changes 1. image-home.html <canvas (drop)="drop(event)" (dragover)="allowDrop(event)" no-bounce width="400px" height="400" (touchstart)='handleStart($event)' (touchmove)='handleMove($event)' [ngStyle]="{'background': '#fff url(' + selectedImage + ') no-repeat 0 0', 'background-size' : 'contain', 'background-position': 'center', 'background-size':

问题 I have created canvas element. Once user add some text with the help of keyboard, on click of done button I want to add text on canvas. I did below changes 1. image-home.html <canvas (drop)="drop(event)" (dragover)="allowDrop(event)" no-bounce width="400px" height="400" (touchstart)='handleStart($event)' (touchmove)='handleMove($event)' [ngStyle]="{'background': '#fff url(' + selectedImage + ') no-repeat 0 0', 'background-size' : 'contain', 'background-position': 'center', 'background-size':

问题 How do game manufacturers prevent visitors from seeing the game code by right-clicking on the page in web browsers in popular HTML5/Canvas games? Are all the game code on the server and just a small part of the game code in the browser and then there is some kind of communication between server and browser with Ajax, Websockets or what? I am curious and would like to know more about this? I'm learning game development in HTML5 with Canvas and I don't want to share all the code that I have