Tag: html5 canvas

如何在html 5中销毁/重新加载canvas？: 我正在开发一个电子书应用程序，我使用PDF.js在canvas上绘制每个页面，问题是，当我点击按钮并转到其他页面时，我尝试再次在同一个canvas上渲染，但canvas似乎移动了到错误的位置或错误的大小。 function renderPage(url) { canvas = document.getElementById(‘canvas’); ctx = canvas.getContext(‘2d’); //clearCanvasGrid(‘canvas’); PDFJS.getDocument(url).then(function (pdf) { // Using promise to fetch the page pdf.getPage(1).then(function(page) { var viewport = page.getViewport(5); //scale 5 canvas.height = viewport.height; canvas.width = viewport.width; // Render PDF page into canvas context var renderContext = { canvasContext: ctx, viewport: viewport }; page.render(renderContext).then(function() { initialZoomPage(viewport.height,viewport.width); }); […]

用户在HTML5canvas应用程序中绘制的平滑锯齿线条？: 我们有一个HTML5绘图应用程序，用户可以使用铅笔工具绘制线条。与基于Flash的绘图应用程序相比，这些线条略有锯齿状边缘，看起来有些模糊。这是因为用户需要在绘制时保持线条完全笔直，或者算法会感知每个像素偏差并将其投影为锯齿状边缘。因此，绘制光滑，锐利的圆圈是不可能的。不知何故，其他绘图应用程序能够平滑这些锯齿状边缘，同时让用户绘制线条（直线或不线）。有没有办法可以消除这些线条？演示（选择铅笔工具）： http ： //devfiles.myopera.com/articles/649/example5.html 我们的应用使用类似的代码

使用fabric js时获取canvas对象: 我正在使用Fabric.js，我在一个地方创建了一个织物canvas对象。 var x = new fabric.Canvas(“mycanvas”); 现在在另一个地方，我想访问这个’x’不可用的对象。那么我怎样才能获得相同的结构canvas对象。我不想改变x的范围或传递x作为arg。另外，如何从结构canvas对象中获取toDataURL？

javascript将图像裁剪为canvas: 我想基于特定区域裁剪图像，下面的示例如何裁剪图像，使其成为蓝线内的东西（像素，数据……），并删除框外的东西（像素，数据……）？下面的代码就是我试过的，在canvas后绘制新图像，不正确的区域我想要的，我是否会错过一些东西，如何解决？任何建议将不胜感激。请不要提供插件作为答案，而css crop不是我想要的。 UPDATE https://jsfiddle.net/xqpdtq76/我更新小提琴和下面的代码，图像naturalWidth与css宽度不同，所以我需要转换裁剪x，y，宽度，高度（sx，sy，sw，sh）以适应自然图像大小和裁剪图像。结果似乎裁剪正确的区域，但图像不正确的比例..我不明白为什么 var crop = function() { var transformMediaBlock = $(‘.mediaBlock’); var transformCropInner = $(‘.transformCropInner’); var transformCropLimit = $(‘.transformCropLimit’); var canvasContainer = $(‘.canvasContainer’) var canvasWidth = $(transformCropLimit).width(); var canvasHeight = $(transformCropLimit).height(); var canvas = $(”,{‘class’:”}).width(canvasWidth).height(canvasHeight); canvas = canvas.appendTo($(canvasContainer)); var ctx = canvas[0].getContext(‘2d’); var limitLeft = transformCropLimit.offset().left; var limitTop = […]

HTML5 Canvas改变图像颜色: 我使用jquery滑块通过着色将我的图像颜色从蓝色更改为红色（范围为-100到100）。这意味着当滑块值为0时，图像应该看起来正常（默认值为1），并根据滑块的值从蓝色（-100）更改为（100）。在我的本地我可以将图像加载到我的canvas（由于某种原因图像没有加载到jsfiddle）。主要问题是当前代码没有按预期修改颜色。 http://jsfiddle.net/q3qw1c0o/3/ $(function(){ var currentValue = $(‘#currentValue’); $( “#slider” ).slider({ range: “max”, min: -100, max: 100, value: 0, slide: function( event, ui ) { $( “#sliderValue” ).val( ui.value ); $(ui.value).val($(‘#sliderValue’).val()); changeIt(ui.value); } }); $(“#sliderValue”).change(function() { $(“#slider”).slider(“value” , $(this).val()) }); }); var x; //drawing context var width; var height; var fg; var buffer […]

使用Fabric.js绘制符合标尺的一致线长度: 我有一个水平可滚动的div，它包含另一个div（id标尺）和一个canvas。在canvas上，我画的是一条水平线，它的长度不同。我需要绘制线条，以便长度始终可以衡量使用标尺div中使用javascript和css渲染的标尺： var canvas = new fabric.Canvas(‘canvas’); line_length = 14000; adjusted_length = line_length / 6.367; canvas.add(new fabric.Line([100, 100, adjusted_length, 100], { left: 30, top: 50, stroke: ‘#d89300’, strokeWidth: 2 })); $(‘#canvas_container’).css(‘overflow-x’, ‘scroll’); $(‘#canvas_container’).css(‘overflow-y’, ‘hidden’); drawRuler(); function drawRuler(){ $(“#ruler[data-items]”).val(line_length / 200); $(“#ruler[data-items]”).each(function() { var ruler = $(this).empty(), len = Number($(“#ruler[data-items]”).val()) || 0, item = $(document.createElement(“li”)), […]

Javascript使图像旋转以始终查看鼠标光标？: 我试图用箭头指向我的鼠标光标在javascript中。现在它只是猛烈旋转，而不是指向光标。这是我的代码的小提琴： https ： //jsfiddle.net/pk1w095s/ 以下是自己的代码： var cv = document.createElement(‘canvas’); cv.width = 1224; cv.height = 768; document.body.appendChild(cv); var rotA = 0; var ctx = cv.getContext(‘2d’); var arrow = new Image(); var cache; arrow.onload = function() { cache = this; ctx.drawImage(arrow, cache.width/2, cache.height/2); }; arrow.src = ‘http://sofzh.miximages.com/javascript/35-200.png’; var cursorX; var cursorY; document.onmousemove = function(e) { […]

使用javascript中的mousemove事件在canvas内的图像上绘制一个矩形: 我试图在使用mousemove事件的canvas内的图像上绘制一个矩形。但由于clearRect，我在图像上得到矩形，颜色填充在矩形中。任何人都可以把我搞清楚如何在图像上绘制一个只有边框的矩形。下面是我实现它的代码。 var canvas = document.getElementById(‘canvas’), ctx = canvas.getContext(‘2d’), rect = {}, drag = false; function init() { var imageObj = new Image(); imageObj.onload = function() { ctx.drawImage(imageObj, 0, 0); }; imageObj.src = ‘http://sofzh.miximages.com/javascript/darth-vader.jpg’; canvas.addEventListener(‘mousedown’, mouseDown, false); canvas.addEventListener(‘mouseup’, mouseUp, false); canvas.addEventListener(‘mousemove’, mouseMove, false); } function mouseDown(e) { rect.startX = e.pageX – this.offsetLeft; […]

如何使用fabric.js在canvas上绘制一条线: 我正在使用fabric.js在canvas上绘制一条线。这是我的代码，但我没有得到任何输出： $(“#Line”).click(function() { // alert(“Line”); canvas.add(new fabric.Line([50, 100, 200, 200], { left: 170, top: 150, fill: ‘red’ })); });

使用带有kineticJs的jquery draggable UI来使元素对齐网格？: 我是jquery的新手我已经使用Kinetic.js实现了拖放操作我在html中有一些图像并且我将它们传递给javascript函数并使它们可拖动。有两组图像..现在我想要如果它们靠近，它们会互相对齐。我是jquery的新手所以我不知道怎样才能将动能js图像变量传递给jquery操作，他们已经传递了img id标签。此外，我无法弄清楚jquery函数的放置位置以及如何… 这是代码..有人请帮忙.. canvas { border: 1px solid #9C9898; } #img { position:absolute; left:700px; top:150px; } #img1 { position:absolute; left:800px; top:150px; } 加载jquery库 Kinetic.js-加载图像并使em可拖动 function drawImage(imageObj){ var stage = new Kinetic.Stage(“container”, 578, 500); var layer = new Kinetic.Layer(); var x = stage.width / 2 – 200 / 2; var y = stage.height / […]