canvas

All html canvas shapes are given the color of the last object added

由 可紊 提交于 2020-01-09 11:46:04
问题 I was trying to do an Olympic type flag, purely as a way of learning how to draw in JavaScript. This should draw two circles - one blue, one black... Here is the code (which I apologise for, been moving things between the two functions - Not sure how to refer to the context non-explicitly): function drawCircle(ctx,x,y,radius, color){ var startAngle = 0; var endAngle = (Math.PI*2); var clockwise = true; ctx.fillStyle = color; ctx.arc(x,y,radius,startAngle,endAngle, clockwise); ctx.fill(); ctx

getImageData always returning 0

由 北城余情 提交于 2020-01-09 11:06:22
问题 I have been trying to make a script that compares two images in HTML5 and Javascript. But for some odd reason, it always returns that the images are completely the same. And when looking at what the problem could be, I found out that every data value of every pixel returned, for some odd reason, "0". So, any idea of what I have done wrong? :) For some reason I feel like it's something very simple, but I just learned about the canvas element, so yeah. This is my code: function compareImg() {

Drawing semi-transparent lines on mouse movement in HTML5 canvas

由 倾然丶 夕夏残阳落幕 提交于 2020-01-09 10:48:59
问题 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

How to insert input text into image?

由 南笙酒味 提交于 2020-01-09 09:36:10
问题 I want to develop extension for magento which help to create custom t-shirt but i don't know how to do it.I want to provide functionality like this site http://www.inkpixi.com/item/ATV+Repair/A252/329/item.html Dead link here you enter the name and then name automatically insert to image .i want to provide this exactly but didn't get right matter 回答1: You can do it so simply with canvas var canvas = document.createElement('canvas'), ctx = canvas.getContext('2d'); canvas.width = 200; canvas

Get Mouse Position on Canvas (But NOT on window)?

由 爱⌒轻易说出口 提交于 2020-01-09 07:21:53
问题 I have a project in WPF 4 and vb.net 2010. I have a canvas inside a window. The window is full screen, but the canvas is set to a solid 640x480 in the center of the window. I need to get the mouse position inside of the canvas, but NOT inside of the window. How do I do this? 回答1: Doesn't this work? Point p = Mouse.GetPosition(canvas); The position of the mouse pointer is calculated relative to the specified element with the upper-left corner of element being the point of origin, 回答2: Hi the

How to resize html canvas element?

由 最后都变了- 提交于 2020-01-08 19:47:48
问题 I have a canvas element defined statically in the html with a width and height. If I attempt to use JavaScript to resize it dynamically (setting a new width and height - either on the attributes of the canvas or via the style properties) I get the following error in Firefox: uncaught exception: [Exception... "Illegal operation on WrappedNative prototype object" nsresult: "0x8057000c (NS_ERROR_XPC_BAD_OP_ON_WN_PROTO)" location: "JS frame :: file:///home/russh/Desktop/test.html :: onclick ::

20-canvas之形变

由 时光总嘲笑我的痴心妄想 提交于 2020-01-08 15:47:16
1 <!DOCTYPE html> 2 <html lang="en"> 3 <head> 4 <meta charset="UTF-8"> 5 <title>20-Canvas形变</title> 6 <style> 7 *{ 8 margin: 0; 9 padding: 0; 10 } 11 canvas{ 12 display: block; 13 margin: 0 auto; 14 background: red; 15 } 16 </style> 17 </head> 18 <body> 19 <canvas width="500" height="400"></canvas> 20 <script> 21 // 1.拿到canvas 22 let oCanvas = document.querySelector("canvas"); 23 // 2.从canvas中拿到绘图工具 24 let oCtx = oCanvas.getContext("2d"); 25 // 注意点: 在canvas中所有的形变属性操作的都是坐标系, 而不是图形 26 27 // 所以，要先改变坐标系的位置，才能绘制图形，不然，就会失效 28 // oCtx.translate(100, 0); 29 // oCtx.translate(0, 100); 30 // oCtx

12-es6类的方式封装折线图

由 冷暖自知 提交于 2020-01-08 15:21:13
1 <!DOCTYPE html> 2 <html lang="en"> 3 <head> 4 <meta charset="UTF-8"> 5 <title>12-Canvas折线图封装</title> 6 <!----> 7 <style> 8 *{ 9 margin: 0; 10 padding: 0; 11 } 12 canvas{ 13 display: block; 14 margin: 0 auto; 15 background: red; 16 } 17 </style> 18 </head> 19 <body> 20 <script> 21 /* 22 面向过程: 亲力亲为 23 面向对象: 找对象, 让对象做事情 24 找一个折线图对象, 你给我画格子, 你给我画坐标系, 你给我画数据点, 你给我画折线 25 * */ 26 class LineChart{ 27 constructor(width=300, height=150){ 28 // 1.创建canvas 29 this.canvas = document.createElement("canvas"); 30 this.canvas.width = width; 31 this.canvas.height = height; 32 document.body.appendChild(this

13-绘制矩形的简写方式

由 风格不统一 提交于 2020-01-08 15:10:59
1 <!DOCTYPE html> 2 <html lang="en"> 3 <head> 4 <meta charset="UTF-8"> 5 <title>13-Canvas绘制矩形</title> 6 <style> 7 *{ 8 margin: 0; 9 padding: 0; 10 } 11 canvas{ 12 display: block; 13 margin: 0 auto; 14 background: red; 15 } 16 </style> 17 </head> 18 <body> 19 <canvas width="300" height="300"></canvas> 20 <script> 21 // 1.拿到canvas 22 let oCanvas = document.querySelector("canvas"); 23 // 2.从canvas中拿到绘图工具 24 let oCtx = oCanvas.getContext("2d"); 25 /* 26 oCtx.moveTo(100, 100); 27 oCtx.lineTo(300, 100); 28 oCtx.lineTo(300, 300); 29 oCtx.lineTo(100, 300); 30 oCtx.closePath(); 31 // oCtx.stroke(); 32

18-canvas绘制饼状图

由 冷暖自知 提交于 2020-01-08 15:10:15
1 <!DOCTYPE html> 2 <html lang="en"> 3 <head> 4 <meta charset="UTF-8" /> 5 <title>18-Canvas绘制饼状图</title> 6 <style> 7 * { 8 margin: 0; 9 padding: 0; 10 } 11 canvas { 12 display: block; 13 margin: 0 auto; 14 background: red; 15 } 16 </style> 17 </head> 18 <body> 19 <canvas width="500" height="400"></canvas> 20 <script> 21 // 1.拿到canvas 22 let oCanvas = document.querySelector("canvas"); 23 // 2.从canvas中拿到绘图工具 24 let oCtx = oCanvas.getContext("2d"); 25 26 // 1.计算圆心的位置 27 let rx = oCtx.canvas.width / 2; 28 let ry = oCtx.canvas.height / 2; 29 30 // 2.绘制第一个扇形 31 // oCtx.moveTo(rx, ry); 32 // oCtx.arc
订阅 canvas