标签: html5-canvas
如何独立创建一个新的ImageData对象？
我想在代码中创建一个新的ImageData对象.如果我Uint8ClampedArray想要制作一个图像对象,那么最好的方法是什么？
我想我可以创建一个新的canvas元素,提取它的ImageData并覆盖它的数据属性,但这似乎是一个错误的方法.
如果我可以直接使用ImageData构造函数会很好,但我无法弄清楚如何.
推荐指数
解决办法
查看次数
foreignobject在IE10中不起作用
我想在canvas中使用foreignobject元素绘制HTML文本,在MDN我可以看到下面的链接(参见参考资料),这在Chrome和Mozilla浏览器中工作正常但在IE10中没有,我使用的是IE10.
浏览器模式:IE10和文档模式:标准
参考:https: //developer.mozilla.org/en/docs/HTML/Canvas/Drawing_DOM_objects_into_a_canvas
错误:
DOM7000: Access Denied. Resource access is restricted for cross-origin URL: 'blob:7C72C95F-3E3F-4CD6-804C-C2D8CCC06283'.
文件:
以下是代码段: -
<!DOCTYPE html>
<html>
<body>
<p><canvas id="canvas" style="border:2px solid black;" width="200" height="200"></canvas>
<script>
var canvas = document.getElementById("canvas");
var ctx = canvas.getContext("2d");
var data = "<svg xmlns='http://www.w3.org/2000/svg' width='200' height='200'>" +
"<foreignObject width='100%' height='100%'>" +
"<div xmlns='http://www.w3.org/1999/xhtml' style='font-size:40px'>" +
"<em>I</em> like <span style='color:white; text-shadow:0 0 2px blue;'>cheese</span>" +
"</div>" +
"</foreignObject>" +
"</svg>";
var DOMURL = self.URL || self.webkitURL || self;
var …推荐指数
解决办法
查看次数
ReferenceError:未定义图表 - chartjs
Chart.js有错误吗？每次我将Chart.js中的任何图形添加到我的网站时,我都会收到错误,但是当我将该图形用作独立程序时,它运行顺畅而没有错误.我正在使用HTML5.
<html>
<head>
<meta charset="utf-8" />
<title>Rice Consumption</title>
<script src='Chart.min.js'></script>
</head>
<body>
<canvas id="rice" width="600" height="400"></canvas>
<script>
var riceData = {
labels : ["January","February","March","April","May","June"],
datasets :
[
{
fillColor : "rgba(172,194,132,0.4)",
strokeColor : "#ACC26D",
pointColor : "#fff",
pointStrokeColor : "#9DB86D",
data : [203000,15600,99000,25100,30500,24700]
}
]
}
var rice = document.getElementById('rice').getContext('2d');
new Chart(rice).Line(riceData);
</script>
</body>
</html>
已解决:我只是将脚本与canvas元素分离(为脚本创建另一个文件以执行其功能).
更新的HTML:
<html>
<head>
<meta charset="utf-8" />
<title>Rice Consumption</title>
<script src='Chart.min.js'></script>
</head>
<body>
<canvas id="rice" width="600" height="400"></canvas>
<script src='Chart.min.js'></script>
<script src='rice.js'></script>
</body>
</html>
新的JavaScript文件: …
推荐指数
解决办法
查看次数
使用unicode字符理解canvas fillText的问题
我想使用canvas在字体中显示特殊字符fillText.代码基本上是:
canvas = document.getElementById("mycanvas");
context = canvas.getContext("2d");
hexstring = "\u00A9";
//hexstring = "\\u" +"00A9";
context.fillText(hexstring,100,100);
如果我使用第一个hexstring,它可以工作,我得到版权符号.如果我使用第二个,它只显示\u00A9.由于我需要遍历数字,我需要使用第二个来显示字体的所有特殊字符.我正在使用utf-8.我究竟做错了什么？
推荐指数
解决办法
查看次数
HTML5画布 - 如何在图像背景上画线？
我试图在图像背景上绘制一条线 - 在HTML5 Canvas中.但是,总是在图像后面绘制线条.实际上,首先绘制线条,然后绘制图片 - 无论我如何调用函数.
如何将线条置于图像顶部？
var canvas = document.getElementById("myCanvas");
var context = canvas.getContext("2d");
context.clearRect(0, 0, canvas.width, canvas.height);
drawbackground(canvas, context);
drawlines(canvas, context);
function drawbackground(canvas, context){
var imagePaper = new Image();
imagePaper.onload = function(){
context.drawImage(imagePaper,100, 20, 500,500);
};
imagePaper.src = "images/main_timerand3papers.png";
}
function drawlines(canvas, context){
context.beginPath();
context.moveTo(188, 130);
context.bezierCurveTo(140, 10, 388, 10, 388, 170);
context.lineWidth = 10;
// line color
context.strokeStyle = "black";
context.stroke();
}
推荐指数
解决办法
查看次数
测量html5 canvas元素上的文本高度
我知道我可以使用context.measureText来获取某些文本的宽度,如果它现在将在画布上呈现.有没有办法做同样的但得到文本的高度？
只是想到了自己 - 也许我可以旋转文字90Deg,然后测试宽度？...
推荐指数
解决办法
查看次数
使用KineticJS从图层中删除对象
我目前正在开展涉及KineticJS的项目.
我必须不断地动态创建和删除形状,但似乎无法弄清楚如何做后者.我一直在努力做到:
$ myLayer.remove(myShape)
因为这是大多数帖子似乎推荐的.但是,文档说这会从舞台上移除图层而不是图层中的形状.当我在项目中尝试这个时,它实际上从舞台中移除了该层.
我是做错了什么,还是有其他方法从图层中删除形状？
推荐指数
解决办法
查看次数
使用fabric js时获取canvas对象
我正在使用Fabric.js,我在一个地方创建了一个织物画布对象.
var x = new fabric.Canvas("mycanvas");
现在在另一个地方,我想访问这个"x"将无法使用的对象.那么我怎样才能获得相同的结构画布对象.
我不想改变x的范围或传递x作为arg.
另外,如何从结构画布对象获取toDataURL？
推荐指数
解决办法
查看次数
使用HTML5的画布使用外部笔划绘制文本
我目前正在使用HTML5的画布使用fillText方法渲染大量字符串.这很好,但我也想给每个字符串一个1px的黑色外笔画.不幸的是,strokeText函数似乎应用了内部笔划.为了解决这个问题,我编写了一个drawStrokedText函数来实现我所追求的效果.不幸的是它很慢(原因很明显).
是否有使用本机画布功能实现1px外部笔划的快速,跨浏览器方式？
drawStrokedText = function(context, text, x, y)
{
context.fillStyle = "rgb(0,0,0)";
context.fillText(text, x-1, y-1);
context.fillText(text, x+1, y-1);
context.fillText(text, x-1, y);
context.fillText(text, x+1, y);
context.fillText(text, x-1, y+1);
context.fillText(text, x+1, y+1);
context.fillStyle = "rgb(255,255,255)";
context.fillText(text, x, y);
};
这是工作效果的一个例子:
推荐指数
解决办法
查看次数
在HTML5画布中简单加载动画
我正在寻找一个简单的图像加载动画.我想找到一个简短而简单的sollution,它只使用画布上的绘图和普通的Javascript.
请求帮助
推荐指数
解决办法
查看次数
标签 统计
html5-canvas ×10
javascript ×9
html5 ×6
canvas ×3
animation ×1
chart.js ×1
fabricjs ×1
getimagedata ×1
jquery ×1
kineticjs ×1
measurement ×1
svg ×1
text ×1