html5-canvas

问题 I'm using this script: var canvas = new fabric.Canvas('game_canvas', { selection: false }); fabric.Image.fromURL('images/bg.jpg', function(img) { img.set('left', 1024/2).set('top', 600/2).set('zindex', 0); canvas.add(img); }); fabric.Image.fromURL('images/panel-2-bg-l-r.png', function(img) { img.set('left', 262/2).set('top', (390/2)+110).set('zindex', 1); canvas.add(img); }); fabric.Image.fromURL('images/player-board.png', function(img) { img.set('left', 254/2).set('top', (122/2)).set('zindex

问题 I'm trying to let users specify an area by painting over it with a "paint" tool that draws semi-transparent lines on a canvas. Its purpose is specifying a "mask" for an image that will be drawn below on the canvas. This is what I tried so far: var canvas = document.getElementById('canvas'); var ctx = canvas.getContext('2d'); var canvasPos = canvas.getBoundingClientRect(); var dragging = false; drawImage(); $(canvas).mousedown(mouseDown); $(canvas).mouseup(mouseUp); $(canvas).mousemove

问题 To play around with HTML5 canvas, I decided to make an app which draws an analogue clockface. Everything's fine, except that old lines don't get erased in the way that I would expect. I've included part of the code below - DrawHands() gets called once a second: var hoursPoint = new Object(); var minutesPoint = new Object(); var secondsPoint = new Object(); function drawHands() { var now = new Date(); drawLine(centerX, centerY, secondsPoint.X, secondsPoint.Y, "white", 1); var seconds = now

问题 I have a problem with export fabric's canvas to url. How can I export all content with imes from canvas to url? Because for now, I can see that only red background has been exported. Here's my fiddle : https://jsfiddle.net/y7pu4wn3/13/ <div id="custom-label" style="position: absolute; right: 0px; top: 50px; z-index:10; width: 512px; height: 256px; border: 1px solid #7d8d20"> <canvas id="draw-area" width="512" height="256" style=""></canvas> </div> 回答1: Your result is correct. You are getting

问题 I am trying to show certain attributes for each object on a canvas, but I am having a difficult time writing the code to do so. E.G. I want the code below to identify the difference between a shape, text, and image objects and show attributes based off the type. Attributes to console.log: for each object on canavas check to see if - Image then URL (source) and scale <= I am having a difficult time showing the source and name of the image. Text then font family, font size, color, scale Shape

问题 I trying to do an anti-aliasing drawing function in canvas. Thanks to all the super answers on this site about canvas and aliasing. here's the demo: https://jsfiddle.net/garciaVvV/eu34c8sy/12/ here's the line js: function lineXY(mouseX, mouseY, mouseXX, mouseYY){ var x0= mouseX; var y0= mouseY; var x1= mouseXX; var y1= mouseYY; var coordinatesArray = []; // Translate coordinates // Define differences and error check var dx = Math.abs(x1 - x0); var dy = Math.abs(y1 - y0); var sx = (x0 < x1) ?

问题 I am trying to use Pixastic JavaScript library for image manipulation in Windows 8 Metry Style app using JavaScript as language. I am passing canvas as input parameter and trying to get image and binging again to canvas but the image value that i am getting all the time is FALSE. CODE: // First, draw it into the backing canvas context.drawImage(video, 0, 0, width, height); // change brightness and contrast Pixastic.Client.isIE = false; Pixastic.process(canvas, 'brightness', { 'brightness': 2,

问题 The use case is that I have an html canvas on top of several html elements which listen for right click mouse events. I want to draw on the canvas using left mouse button, and at the same time interact with underlying html elements using right click. I get that I can allow all mouse events to pass through the canvas by setting css property pointer-events to none. However I want to allow only right click to pass through it. One way to achieve this may be to listen on the canvas for right click

问题 I'm trying replace HTML5 Canvas to simple <div> But I don't know how to replace this line: ctx.drawImage(tileImg[drawTile],xpos,ypos); Maybe anyone have idea how to replace this into <div> ? example : http://jsfiddle.net/HDpMW/5/ (this code from glacialflame.com) 回答1: Use <img> elements, and append them dynamically like this: http://jsfiddle.net/HDpMW/6/ var elem = document.createElement('img'); elem.src = tileDict[drawTile]; elem.style.position = 'absolute'; elem.style.left = xpos + 'px';

问题 How can I achieve a blur behind a transparent box ( fillStyle = 'rgba(255, 255, 255, 0.2)' ) in JavaScript canvas? Here's what I've got so far: var canvas = document.getElementById('draw'); var c = canvas.getContext('2d'); function main() { c.fillStyle = '#222'; c.fillRect(0, 0, canvas.width, canvas.height); c.fillStyle = '#000'; c.fillRect(32, 32, 64, 64); c.fillStyle = 'rgba(255, 255, 255, 0.2)'; c.filter = 'blur(5px)'; c.fillRect(16, 16, 128, 24); } But what happens, is instead of blurring