html5-canvas | 易学教程

Jquery Brush Size Slider for Canvas HTML5

阅读更多关于 Jquery Brush Size Slider for Canvas HTML5

问题 Hello I'm trying to create a brush size slider for my Canvas drawing app, would anyone be able to assist in how to go about this?? A few of the approaches I have found weren't compatible with my Jquery library that I have running my app. thank you :) 回答1: Easy: Create an input element of type range : <input type=range min=1 max=100 id=brushSize> Read its value and apply to lineWidth of the context: $("#brushSize").on("input", function(e) { ctx.lineWidth = $(this).val() }); $("#brushSize").on(

I've implemented a bouncing ball using html5 canvas, but can't figure out how to make the ball rotate at the same time

阅读更多关于 I've implemented a bouncing ball using html5 canvas, but can't figure out how to make the ball rotate at the same time

问题 I'm trying to implement a bouncing element around the edges of the viewport. I've successfully implemented the bouncing mechanism, but can't figure out how to make it rotate accordingly. Any help is appreciated! Fiddle function Ball (radius, color) { if (radius === undefined) { radius = 50; } this.x = 0; this.y = 0; this.radius = radius; this.vx = 0; this.vy = 0; this.rotation = 0; this.scaleX = 1; this.scaleY = 1; this.color = "#000"; } Ball.prototype.draw = function (context) { context.save

How create a line with borders in HTML5 canvas properly

阅读更多关于 How create a line with borders in HTML5 canvas properly

问题 I want to draw a path of lines with borders in html, to render the streets in a map, but I could not find any standard way to do that, so I resourced to draw two superposed lines, the first one thicker than the second. The first attempt actually worked well: <!DOCTYPE html> <html> <body> <canvas id="myCanvas" width="1000" height="1000" style="border:1px solid #000000;"> Your browser does not support the HTML5 canvas tag. </canvas> <script> var c=document.getElementById("myCanvas"); var ctx=c

Canvas.toDataURL() Tainted canvases may not be exported

阅读更多关于 Canvas.toDataURL() Tainted canvases may not be exported

问题 I am trying to use javascript, html, css to create a page that I can resize an image from an online link. However, when resized, I faced the error that Tainted canvases may not be exported while using Canvas.toDataURL() . I have searched the issue in google and here. Somebody suggested to amend the photo's crossorigin to anonymous or '*'. I tried both methods but it doesn't work for me. I wonder anyone can offer help. My code is in the below link. https://jsfiddle.net/pangkachun/7axkq9pe/1/

Draw a Filled Polygon using Scanline Loop

阅读更多关于 Draw a Filled Polygon using Scanline Loop

问题 I'm trying to draw a filled polygon using individual pixels in a scanline loop (so no lineTo or fill Canvas methods). I was able to achieve a triangle in this method (example below), but I'm not sure where to begin with a more complex polygon (such as a star shape ★). Can anyone give any advice on how to approach this or existing shape algorithm examples for Javascript & Canvas? I have researched Bresenham’s Algorithm but was unsuccessful implementing it for polygons because of my limited

Fabric toDataUrl with multiplier not working as expected

阅读更多关于 Fabric toDataUrl with multiplier not working as expected

问题 In my code I created method to clip images using fabric shapes. I have used stackoverflow answer for achieving this. Somehow after using this method I cannot render the canvas using default fabric canvas render method. var img01URL = 'https://www.google.com/images/srpr/logo4w.png'; var img02URL = 'http://fabricjs.com/lib/pug.jpg'; var canvas = new fabric.Canvas('c'); document.getElementById('download').addEventListener('click', function() { canvas.renderAll(); this.href = canvas.toDataURL({

fabric.js: bind event to background image

阅读更多关于 fabric.js: bind event to background image

问题 I'm trying to bind an event to a background image: var imgInstance = fabric.Image.fromURL(path, function(oImg) { oImg.on("selected", function() { alert(); }); canvas.setBackgroundImage(oImg, canvas.renderAll.bind(canvas), { top: 0, left: 0 }); oImg.on("selected", function() { alert(); }); }); I can get it work. I'm trying to bind mouse events to handle drag, so i can move the image when it's bigger than the canvas, like background-cover css property. Thoughts? Thanks guys! SOLUTION: var

fabric.js: bind event to background image

阅读更多关于 fabric.js: bind event to background image

Make HTML Canvas generate PDF-ready Line art?

阅读更多关于 Make HTML Canvas generate PDF-ready Line art?

问题 I have an HTML/JavaScript program that uses the HTML5 canvas to generate a pretty graph: I want to include this graph in a book that I'm producing with LaTeX. Unfortunately, when I print this page to PDF, I get a bitmap—presumably because canvas is a bitmap. I just checked and apparently if I had developed this with SVG instead of with HTML5 canvas I would be good to go. But I didn't. So is there any way to generate line art from HTML5 Canvas, or should I just bite the bullet and re-implement

Canvas has white space at the bottom and scrolls too far

阅读更多关于 Canvas has white space at the bottom and scrolls too far

问题 I'm using this answer https://stackoverflow.com/a/36233727/1350146 to scroll a canvas in a div. I'm also hiding the scrollbar. The problem is it appears to scroll too far, in this case if you scroll down you can see the red of the div the canvas is in. I've tried messing with padding & margins and different sizes but no luck. var c = document.getElementById("myCanvas"); var ctx = c.getContext("2d"); ctx.fillStyle = '#00aa00' ctx.fillRect(0, 0, c.width, c.height); ctx.fillStyle = '#fff' ctx