Tag: html5 canvas
如何使用JavaScript / jQuery选择图像的多边形区域？
我希望能够让我的用户选择他们上传的图像的特定多边形（点之间有曲线6-8个顶点）区域 – 如何使用HTML5和JS进行此操作？ 我找到的唯一一个库允许纯粹的矩形选择： http ： //odyniec.net/projects/imgareaselect/
如何使用Fabric.js将图像上传到canvas？
我想要创建一个过程，用户可以上传他们的图像然后在浏览器中使用Fabric.js在Canvas中使用一些按钮编辑它们-wich使用Fabric.js来添加一些效果。 我不能让它发挥作用。 我的HTML是： Javascript如下： var canvas = new fabric.Canvas(‘canvas’); canvas.setHeight(480); canvas.setWidth(640); $(‘#uploadedImg’).change(function () { var imgData = $(this).files[0]; fabric.util.loadImage(imgData, function(img) { var oImg = new fabric.Image(img); oImg.scale(0.2).set({ left: 100, top: 100, }); canvas.add(oImg); }); });
如何使用jquery在窗口resize上缩放Raphael js元素
如何在窗口更换时重新调整Raphaelcanvas内的所有元素？ 考虑下面的代码/ 演示如果我重新调整我的窗口大小只有div container缩放，因为我将其宽度设置为窗口宽度的50％而没有（ rect ， circle或path ）更改 码 #container{border : 1px solid black ; width : 50% ; height:300px} var con = $(“#container”); var paper = Raphael(con.attr(‘id’), con.attr(‘width’), con.attr(‘height’)); var win = paper.rect(0,0,400,300).attr({stroke: ‘black’ }) ; var path = paper.path(“M 200 100 l 100 0 z”) ; var cir = paper.circle(50, 50, 40);
如何在html5canvas中弯曲/弯曲图像
我有这个 我想做这个 至 HTML JS var temp_can1, temp_can1_ctx; $(document).ready(function () { temp_can1 = document.getElementById(‘mycanvas’); temp_can1_ctx = temp_can1.getContext(‘2d’); var imageObj_rotator3 = new Image(); imageObj_rotator3.onload = function () { temp_can1_ctx.drawImage(imageObj_rotator3, 0, 0); temp_can1_ctx.globalCompositeOperation = “source-atop”; var pattern = temp_can1_ctx.createPattern(imageObj_rotator3, ‘no-repeat’); temp_can1_ctx.rect(0, 0, temp_can1.width, temp_can1.height); temp_can1_ctx.fillStyle = pattern; temp_can1_ctx.fill(); temp_can1_ctx.globalAlpha = 0.10; temp_can1_ctx.drawImage(imageObj_rotator3, 0, 0); temp_can1_ctx.drawImage(imageObj_rotator3, 0, 0); […]
如何使用javascript打印canvas内容
我使用jsp页面使用canvas进行写作。 我可以在canvas上写任何消息，（我创建的canvas消息……） 但在此之后，当我想使用javascript print code打印此canvas消息时，我无法打印canvas内容。 下面你可以看到那个打印预览.. 我想打印我在canvas上创建的canvas消息。 请帮助我解决这个问题，任何帮助都将不胜感激..
在html5中，javascript有没有办法制作一个多边形，我只是绘制可拖动的？ 还是听老鼠活动？
所以我用以下代码绘制一个多边形： var canvas = document.getElementById(“polyCanvas”); var c2 = canvas.getContext(“2d”); var coords = ”; c2.clearRect(0, 0, 2000, 2000); $(“fdel”).remove(); $(“#eliminar” + todelete).remove(); c2.beginPath(); var first = true; var points = 1; var done = false; $(“#vertexcontainer .vertex”).each(function() { var position = $(this).position(); var x = 2+position.left; var y = 2+position.top; if (!done){ if (first) { c2.moveTo(x, […]
如何使用canvas修改来自其他域的图像？
这是我使用的代码当我有image.src = “/local/directory/image.png” image.src=”http://sofzh.miximages.com/javascript/image.png”工作，但如果我使用image.src=”http://remote/path”它加载图像但restmousemovefunction不工作。 你是如何解决的？ 复制并粘贴到test.htm $(document).ready(function() { var image = new Image(); var ctx = $(‘#canvas’)[0].getContext(“2d”); image.src = “http://www.google.com/intl/en_com/images/srpr/logo3w.png”; //image.src = “/agents/google.png”; image.width=”340″; image.height=”220″; image.onload = function () { ctx.drawImage(image, 0, 0, image.width, image.height); } $(‘#canvas’).mousemove(function(e) { var canvasOffset = $(this).offset(); var canvasX = Math.floor(e.pageX – canvasOffset.left); var canvasY = Math.floor(e.pageY – canvasOffset.top); var […]
基于鼠标移动的HTML5平移
我正在尝试在HTML5中实现在canvas内“平移”的function，我不确定实现它的最佳方法。 目前 – 我正在尝试检测canvas上鼠标的位置，如果它在边缘的10％范围内，它将朝那个方向移动，如图所示： 当前边缘检测： canvas.onmousemove = function(e) { var x = e.offsetX; var y = e.offsetY; var cx = canvas.width; var cy = canvas.height; if(x <= 0.1*cx && y <= 0.1*cy) { alert("Upper Left"); //Move "viewport" to up and left (if possible) } //Additional Checks for location } 我知道我可以通过在canvas中创建路径并将事件附加到它们来实现这一目标，但我没有用过很多东西，所以我想我会问这里。 此外 – 如果一个“包装”平底锅是可能的将是很棒的（向左平移将最终到达右侧） 。 简介：我想知道在HTML5 […]
HTML5 Canvas toDataURL返回空白
我想上传图像文件，将它们绘制到canvas中，进行更改并将其保存在数据库中。 我试图测试canvas图像（ Pic ）返回的base64值，它是空白的。 但是，当我将canvas（ Pic ）附加到文档时，我看到了结果。 我在这做错了什么？ function handleFileSelect(evt) { var files = evt.target.files; // FileList object for (var i = 0, f; f = files[i]; i++) { if (!f.type.match(‘image.*’)) { continue; } // read contents of files asynchronously var reader = new FileReader(); // Closure to capture the file information. reader.onload = (function(theFile) […]
图表区域背景颜色chartjs
我有图表js的问题，我想像上面的图像着色图表区域 我试图从charJs Docs中找到配置，但没有匹配。 它是否可以改变图表区域的背景颜色？ 如果可能，任何人都可以帮助我 HTML 使用Javascript var ctx = document.getElementById(“barChart”); var barChart = new Chart(ctx,{ type: ‘bar’, data: { labels:[“Label1″,”Label2″,”Label3″,”Label4”], borderColor : “#fffff”, datasets: [ { data: [“2″,”3″,”1″,”4”], borderColor : “#fff”, borderWidth : “3”, hoverBorderColor : “#000”, backgroundColor: [ “#f38b4a”, “#56d798”, “#ff8397”, “#6970d5” ], hoverBackgroundColor: [ “#f38b4a”, “#56d798”, “#ff8397”, “#6970d5” ] }] }, options: […]
