标签: html5-canvas
HTML5画布反别名？
我正在尝试用画布绘制二次曲线.这是代码:
HTML:
<canvas id="mycanvas">
Your browser is not supported.
</canvas>
JavaScript的:
var canvas = document.getElementById("mycanvas");
canvas.style.width = "1000px";
canvas.style.height = "1000px";
if (canvas.getContext) {
var ctx = canvas.getContext("2d");
var x = 0,
y = 0;
setInterval(function() {
ctx.lineTo(x, y);
ctx.stroke();
x += 1;
y = 0.01 * x * x;
}, 100);
}
但结果真的很难看,首先,线条太粗,第二,别名是如此明显......我怎么能改善呢？
你可以在这里看到效果:http://jsfiddle.net/7wNmx/1/
推荐指数
解决办法
查看次数
使用SVG路径数据绘制Canvas中的路径(到Canvas路径的SVG路径)
我在SVG中有一个国家的详细地图,在这种格式的区域中分开:
<path class="state-x-area"
d="m 575.8672,180.4954 c -0.6572,-0.0938 -2.252,-0.4688 -2.627,-0.375 -1.0313,0.1875 0.375,1.501 -0.1875,1.876 -0.4688,0.1875 -1.0313,-0.0938 -1.501,0.0938 -0.1875,0.0938 0.0938,0.4688 -0.0938,0.6572 -0.9375,0.75 -2.4385,0.8438 -3.377,1.6875 -1.125,1.0322 2.0635,3.6582 0.6572,4.6904 -3.2832,2.3447 -1.2197,-1.5947 -3.377,1.501 -0.2813,0.375 0.8438,0.4688 1.0313,0.9375 0.1875,0.376 -0.9375,0.2822 -0.9375,0.6572 0,0.1875 0.9375,1.4072 0.5625,1.876 -1.0313,1.0313 -2.5322,-0.5635 -3.4707,-0.5635 -1.4063,0 1.3135,1.3135 -1.0313,0.6572 -0.6572,-0.1875 -1.501,-1.2197 -1.7822,-1.7822 -0.1875,-0.1875 -0.376,-0.751 -0.4697,-0.5625 -0.375,0.5625 -0.2813,1.2188 -0.6563,1.6875 -1.2188,1.5947 -2.9082,0 -4.3145,0.4697 -0.1875,0.0938 0.1875,0.4688 0,0.6563 -0.8447,0.4688 -2.5332,0.375 -3.377,0 0,0 0,-0.0938 0.0938,-0.0938 0.4688,-0.4688 1.0313,-0.9375 1.2197,-1.4072 3.2822,0.1875 -0.4697,-2.0635 -1.4072,-2.626 -0.6563,-0.375 0.375,-1.5947 0.1875,-2.0635 -0.1875,-0.4697 -1.6885,0.8438 -1.3135,-0.376 0.2813,-0.8438 2.0635,-1.5938 1.4072,-2.1572 -0.4688,-0.375 -2.627,-0.1875 …推荐指数
解决办法
查看次数
谷歌浏览器和FPS的奇怪行为
我编写了一个小引擎,在Canvas2D中使用javascript显示5个精灵.一切正常,并完全优化.
FPS在30到60之间波动 - 但有趣的是,它在google javascript控制台打开时以恒定的60 fps表示!
有没有其他身体经历过这个？
我正在使用requestAnimationFrame
编辑:
示例:http: //jsfiddle.net/jrPNy/1
玩"粒子"数字,所以你的fps大约是40-50.比打开控制台,它最高可达60 fps.(Chrome 21.0.1180.83)
推荐指数
解决办法
查看次数
在mousemove上旋转对象以面对鼠标指针
我的游戏中有一个鼠标移动光标,这会让我的对象朝我的鼠标光标射击.我希望我的对象始终旋转以与我的鼠标一致.如何将光标所在的X和Y转换为角度以将对象旋转到？
我希望我的小提琴会让旋转播放器(Black block)让我的意思更加清晰:http://jsfiddle.net/3nEUv/4/
这是我的mouseMove函数现在; 只确保光标保留在其边界框中
function mouseMove(e) {
if (cursor) {
if (e.rawX && e.rawY) {
cursorBoundingBox(e.rawX, e.rawY);
}
}
}
推荐指数
解决办法
查看次数
寻找一个家谱
我正在为我的Web应用程序创建具有HTML5要求的Family Tree功能.我已经搜索并找到了一些JS样本,但我找不到符合我要求的样本.我已经尝试过JIT,Rafael,GoJS等.
我发现这是距离GoJS最近的一个:
但这还不够.我需要使用拖放功能将一个成员与另一个成员连接起来.
是否有一些JS可能符合要求或至少像GoJS一样运作？由于我需要为GoJS支付许可证,然后定制它,预算紧张.非常感谢你.
推荐指数
解决办法
查看次数
在这个例子中Canvas.Context Save and Restore的目的是什么？
此页面显示HTML5画布中的一些动画.如果查看滚动条的来源,则会在清除矩形并在动画后恢复它时保存上下文.如果我用另一个ctx.clearRect(0, 0, can.width, can.height语句替换restore 语句,则无效.我认为恢复正在恢复已清除的矩形,但它似乎恢复了更多信息.下一帧需要的额外信息是什么？
我不是在寻找保存和恢复的HTML5教科书定义,但我想了解这个具体示例中为什么需要它们.
UPDATE
在我不想得到save()和restore()的定义的问题中我已经特别提到的答案是令人沮丧的.我已经知道Save()保存上下文的状态,Restor()e恢复它.我的问题很具体.为什么在将所有Save do保存为空画布时,以示例方式使用restore().为什么还原空白画布与清除它不一样？
推荐指数
解决办法
查看次数
blockWebkitDraw是什么意思以及如何解决它？
我正在使用WebView包装Android应用程序,它需要呈现HTML5画布.它可以在我的所有设备上完美运行,除了一个.我的Galaxy S4(4.2.2)正在闪烁画布,然后很快变灰.这是它产生的logcat消息:
D/GestureDetector(20071):[Surface Touch事件] mSweepDown False,mLRSDCnt:-1 mTouchCnt:7 mFalseSizeCnt:0
V/WebViewInputDispatcher(20071):blockWebkitDraw
V/WebViewInputDispatcher(20071):blockWebkitDraw lockedfalse
D/webview(20071):blockWebkitViewMessage = false
我点击一个按钮,然后画布应该渲染.这就是第一个日志项用于表面触摸事件的原因.当我直接使用webkit浏览器ping我的应用程序时,它适用于我的S4,但是当我自己包装或使用Cordova时,它会给我这个错误.我添加了两个屏幕截图以进一步显示问题.第一个是正确渲染,第二个是问题.
Android 2.3.6:
Android:4.2.2:
所以回到我的问题.这条消息怎么了？有没有人对如何正确渲染画布有任何建议？
推荐指数
解决办法
查看次数
three.js 2D文本精灵标签
我是three.js的新手,并且有一些属于2D Text的问题:
我想要的是: 我想要一些标签,例如.x,y和z轴.标签应始终贴在相机上.也许以后他们只应该被展示,如果他们徘徊,但这是另一个话题.
我发现这个教程有什么问题(这是我想要实现的效果| http://stemkoski.github.io/Three.js/Sprite-Text-Labels.html),但这是旧版本的三个.js使用类似的方法var spriteAlignment = THREE.SpriteAlignment.topLeft;.我发现这个解决方法(THREE.SpriteAlignment显示为未定义)但我不清楚如何根据我的需要使用新方法.
我正在寻找的东西 也许你可以帮助我说出我正在寻找的东西,或者想出一个简短的方法.
推荐指数
解决办法
查看次数
Chart.js:图表未显示
我想使用Chart.js在网页中创建令人惊叹的图表.
在文档之后,我编写了如下代码:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8"/>
<title>Chart.js demo</title>
<script src="https://cdnjs.cloudflare.com/ajax/libs/Chart.js/0.2.0/Chart.min.js" type="text/javascript"></script>
</head>
<body>
<script>
var pieData = [
{
value: 20,
color:"#878BB6"
},
{
value : 40,
color : "#4ACAB4"
},
{
value : 10,
color : "#FF8153"
},
{
value : 30,
color : "#FFEA88"
}
];
// Get the context of the canvas element we want to select
var countries= document.getElementById("countries").getContext("2d");
new Chart(countries).Pie(pieData);
</script>
<h1>Chart.js Sample</h1>
<canvas id="countries" width="600" height="400"></canvas>
</body>
</html>
图表没有出现的原因是什么？
推荐指数
解决办法
查看次数
如何在Jest中为我的测试添加<canvas>支持？
在我的Jest单元测试中,我正在使用ColorPicker渲染一个组件.该ColorPicker组件创建一个canvas对象和2d上下文,但返回'undefined'会引发错误"Cannot set property 'fillStyle' of undefined"
if (typeof document == 'undefined') return null; // Dont Render On Server
var canvas = document.createElement('canvas');
canvas.width = canvas.height = size * 2;
var ctx = canvas.getContext('2d'); // returns 'undefined'
ctx.fillStyle = c1; // "Cannot set property 'fillStyle' of undefined"
我遇到了麻烦,弄清楚为什么我无法获得二维背景.也许我的测试配置存在问题？
"jest": {
"scriptPreprocessor": "<rootDir>/node_modules/babel-jest",
"unmockedModulePathPatterns": [
"<rootDir>/node_modules/react",
"<rootDir>/node_modules/react-dom",
"<rootDir>/node_modules/react-addons-test-utils",
"<rootDir>/node_modules/react-tools"
],
"moduleFileExtensions": [
"jsx",
"js",
"json",
"es6"
],
"testFileExtensions": [
"jsx"
],
"collectCoverage": true …推荐指数
解决办法
查看次数
标签 统计
html5-canvas ×10
html5 ×6
javascript ×6
android ×1
canvas ×1
family-tree ×1
jestjs ×1
jsdom ×1
reactjs ×1
svg ×1
three.js ×1
treeview ×1
trigonometry ×1
webkit ×1