html5-canvas

问题 I am using the HTML5 canvas API to draw a tile map for a pixel art game. The rendered tile map is comprised of many smaller images that are cut out of a single source image called a tile sheet. I am using drawImage(src_img, sx, sy, sw, sh, dx, dy, dw, dh) to cut the individual tiles out of the source image and draw them onto the destination canvas. I am using setTransform(sx, 0, 0, sy, tx, ty) to apply scale and translation to the final rendered image. The color "bleeding" issue I need to fix

问题 I have a mousedown event listener on stage and a mousedown event listener on a shape.when I click on the shape, the mousedown event listener on stage will also fire? How to solve this? var stage = new createjs.Stage("test"); stage.addEventListener('stagemousedown',mouseDown); var shape = new createjs.Shape(); shape.graphics.beginStroke("#000").setStrokeStyle(8,"round").drawRect(0, 0, 100, 100); shape.addEventListener('mousedown',smouseDown); stage.addChild(shape); 回答1: The stagemousedown

问题 I am trying to integrate a cropping tool to my website (js plugging resizing cropping images canvas). This tool will let the user crop an image, open it in a new browser page, and give him the capacity to save the new image into the disk. The cropping code is as following: crop = function(){ //Find the part of the image that is inside the crop box var crop_canvas, left = $('.overlay').offset().left - $container.offset().left, top = $('.overlay').offset().top - $container.offset().top, width =

问题 I'm trying to create a speech bubble with FabricJS to integrate into a WordPress plugin to (hopefully) release for free that helps people annotate images, I found the original bubble here on SO here: speech buble html5 canvas js but I'm having a few issues and am a little unsure as to how to go about solving them (I'll keep trying and post a solution here just in case). fabric.speechBubble = fabric.util.createClass(fabric.Object, fabric.Observable, { type: 'speechBubble', initialize: function

问题 I'm trying to develop a custom shape in D3, but I'm a little green Javascript wise and am not sure what the D3-Shapes library is doing under the hood. In particular, I'm not sure what the default function in symbol.js is doing or how it is used. From the little bit of JS that I do know it appears to be describing a prototype or possibly a class. Supposedly one may register additional shapes using the symbol.type class/function but I'm not sure how I should be calling this e.g. var symbol =

问题 I'm trying to create a speech bubble with FabricJS to integrate into a WordPress plugin to (hopefully) release for free that helps people annotate images, I found the original bubble here on SO here: speech buble html5 canvas js but I'm having a few issues and am a little unsure as to how to go about solving them (I'll keep trying and post a solution here just in case). fabric.speechBubble = fabric.util.createClass(fabric.Object, fabric.Observable, { type: 'speechBubble', initialize: function

问题 I am using following javascript algorithm to draw dashed line on canvas. this algo draws horizontal line correctly but unable to draw vertical line: g.dashedLine = function (x, y, x2, y2, dashArray) { this.beginPath(); this.lineWidth = "2"; if (!dashArray) dashArray = [10, 5]; if (dashLength == 0) dashLength = 0.001; // Hack for Safari var dashCount = dashArray.length; this.moveTo(x, y); var dx = (x2 - x); var dy = (y2 - y); var slope = dy / dx; var distRemaining = Math.sqrt(dx * dx + dy * dy

问题 I want to fill no color to canvas i.e. I want the background div color should keep on displaying in the div. I have googled it but didn't find any solution to keep fillStyle as no color. Also I tried omitting the fillStyle but it leave me with black color. Any options available? Thanks 回答1: You need to use this to clear the canvas: context.clearRect(0, 0, canvas.width, canvas.height); (or the rectangle you need). Also make sure you have no CSS rules set for the canvas element's background

问题 I want to fill no color to canvas i.e. I want the background div color should keep on displaying in the div. I have googled it but didn't find any solution to keep fillStyle as no color. Also I tried omitting the fillStyle but it leave me with black color. Any options available? Thanks 回答1: You need to use this to clear the canvas: context.clearRect(0, 0, canvas.width, canvas.height); (or the rectangle you need). Also make sure you have no CSS rules set for the canvas element's background

问题 let's say I have var myCanvas = document.createElement('canvas'); and I do myCanvas.setAttribute("id", "my-canvas"); document.body.appendChild(myCanvas); Afterwords I make change to myCanvas and want to replace the html-canvas with my updated DOM canvas. The following works: document.getElementById("my-canvas").innerHTML = myCanvas; but the html (via inspector) looks like <canvas id="my-canvas">[object HTMLCanvasElement]</canvas> When it should look like <canvas id="my-canvas"></canvas> How