标签: html5-canvas
在canvas中将文本转换为大写？
将其绘制到canvas标签时,我可以将文本转换为大写吗？
textTransform="uppercase"似乎不起作用,canvas标签不继承CSS text-transform:uppercase.
该文本来自一个我无法控制的变量,所以我不能把它写成大写开头.
0
推荐指数
推荐指数
1
解决办法
解决办法
4607
查看次数
查看次数
Kinetic.js - 创建一个网格
我是Kintetic.js的新手,我正在尝试做网格.宽度为800px,高度为400px.我想要方块(20x20)来覆盖那个区域.每个方格都有1px边框.所以像这样:
var box = new Kinetic.Rect({
width: 20,
height: 20,
fill: 'transparent',
stroke: 'rgba(0, 0, 0, 0.02)'
});
为了填充画布,我有一个像这样的糟糕的for循环:
for (var i = 0; i <= this.field.getWidth(); i = i + 20) {
for (var i2 = 0; i2 <= this.field.getHeight(); i2 = i2 + 20) {
var cbox = box.clone({x: i, y: i2});
this.grid.add(cbox);
}
}
this.grid是一个Kinetic.Layer.这段代码的第一个问题是它非常慢,在网格显示之前我得到了500ms的延迟.但最糟糕的是,如果我在cbox上放置一个mouseover和mouseout事件来改变填充颜色,那真的很慢.我是这样做的:
cbox.on('mouseover', function () {
this.setFill('black');
self.grid.draw();
});
cbox.on('mouseout', function () {
this.setFill('transparent');
self.grid.draw();
});
所以我的问题是如何改进代码和性能呢？
0
推荐指数
推荐指数
1
解决办法
解决办法
3802
查看次数
查看次数
如何使用JavaScript将Base64图像更改为常规图像？
假设我有一个动态生成的图像的整个Base64字符串.我怎样才能转换这样的东西:
<img src="data:image/jpeg;base64,/9j/blah blah blah........." />
至
<img src="mypic.jpg" />
是否可以在客户端进行而无需将图像下载到服务器？有没有办法暂时将Base64图像缓存到内存中并接收实际的图像文件？
0
推荐指数
推荐指数
1
解决办法
解决办法
387
查看次数
查看次数
使用HTML5画布创建渐变颜色选择(所有可能的RGB颜色)
是否可以为线性颜色选择器增加包含所有可能的RGB颜色(仅红色,绿色,蓝色 - 无alpha值)的线性渐变.
到目前为止,我有以下梯度尝试过,但它不会包含所有的值rgb(0,0,0)到rgb(255,255,255):
var grd = ctx.createLinearGradient(0, 0, width, 0);
grd.addColorStop(0, 'red');
grd.addColorStop(1 / 6, 'orange');
grd.addColorStop(2 / 6, 'yellow');
grd.addColorStop(3 / 6, 'green')
grd.addColorStop(4 / 6, 'aqua');
grd.addColorStop(5 / 6, 'blue');
grd.addColorStop(1, 'purple');
任何帮助都非常感谢.
0
推荐指数
推荐指数
1
解决办法
解决办法
4065
查看次数
查看次数
2d html5画布碰撞,howto
正如标题所示,我遇到了物体碰撞问题......我目前正在使用JavaScript进行2d Html5画布游戏.我知道如何防止"玩家"对象超出游戏画布的宽度/高度,并且我知道当玩家与物体碰撞时如何做某事(例如加电或敌人或其他什么)但我只是不知道如何制作一个"坚实"的物体意味着当玩家击中固体物体时,玩家只是停下来,并且无法通过固体物体.
这就是我现在所拥有的(不是所有的代码只是我觉得相关,对不起,如果它太多/太少:
var canvasPlayer = document.getElementById('canvasPlayer');
var ctxPlayer = canvasPlayer.getContext('2d');
var canvasWalls = document.getElementById('canvasWalls');
var ctxWalls = canvasWalls.getContext('2d');
function checkKeyDown(e) {
var keyID = (e.keyCode) || e.which;
if (keyID === 38 || keyID === 87) { // up arrow OR W key
if (!player1.isDownKey && !player1.isLeftKey && !player1.isRightKey) {
player1.isUpKey = true;
e.preventDefault();
} }
if (keyID === 39 || keyID === 68) { //right arrow OR D key
if (!player1.isDownKey && !player1.isLeftKey && !player1.isUpKey) {
player1.isRightKey = true; …0
推荐指数
推荐指数
1
解决办法
解决办法
5232
查看次数
查看次数
HTML5 Canvas没有方法'toDataURL'
我的代码是这样的
<html>
<head>
</head>
<body>
<canvas id="myCanvas" width="578" height="200" style="display:none;"></canvas>
<img id="canvasImg" onclick="myFunction()" alt="Right click to save me!">
<script>
var canvas = document.getElementById('myCanvas');
var context = canvas.getContext('2d');
function myFunction() {
var c = document.getElementsByTagName("canvas");
// save canvas image as data url (png format by default)
var dataURL = c.toDataURL();
// set canvasImg image src to dataURL
// so it can be saved as an image
document.getElementById('canvasImg').src = dataURL;
}
</script>
</body>
</html>
当我点击canvasImg它抛出一个错误
Uncaught TypeError: Object #<NodeList> has …0
推荐指数
推荐指数
1
解决办法
解决办法
5119
查看次数
查看次数
基本的JS/HTML5画布问题
我对使用HTML5的JS非常陌生,我无法获得一段非常基本的代码.我制作了画布,将它附加到身体上,并尝试写文字,但没有任何显示.
<!doctype html>
<html lang="en">
<head>
<meta charset='utf-8'>
<title>Test Game</title>
</head>
<body>
<script type="text/javascript">
var CANVAS_WIDTH=480;
var CANVAS_HEIGHT=320;
var canvasElement=$("<canvas width='"+ CANVAS_WIDTH +"'height='"+CANVAS_HEIGHT+"'></canvas>");
var canvas = canvasElement.get(0).getContext("2d");
canvasElement.appendTo('body');
</script>
<script type="text/javascript">
var FPS = 30;
setInterval(function(){
update();
draw();
},1000/FPS);
function update(){
}
function draw(){
canvas.fillStyle = "#000";//Sets colour to black
canvas.fillText("Sup Bro!",50,50);
}
</script>
</body>
</html>
0
推荐指数
推荐指数
1
解决办法
解决办法
131
查看次数
查看次数
如何使用parbola方程绘制图形
我正在尝试使用抛物线方程(y=x*x)创建图形.但我有点困惑,计算控制点的值.我该如何计算控制点值.
我的JavaScript功能:
function drawParabola()
{
ctx.beginPath();
for(i=-2;i<=2;i++)
{
//formual y= x * x;
y = i * i;
x = i;
if (i == -2) {
ctx.moveTo((5 + x) * 30, Math.abs((-5 + y)) * 30);
}
else {
//ctx.lineTo((5 + x) * 30, Math.abs((-5 + y)) * 30);
context.quadraticCurveTo(**?**, **?**, (5 + x) * 30, Math.abs((-5 + y)) * 30);
}
ctx.strokeStyle = 'orange';
ctx.stroke();
}
}
0
推荐指数
推荐指数
1
解决办法
解决办法
1611
查看次数
查看次数
FileReader需要更多时间加载吗？
以下是我的代码
var uploadIDImage = {
IDPos: {},
IDNeg: {}
};
var FR = new FileReader();
FR.onload = function(e) {
console.log("123");
console.log(e);
$("#UploadIDPos img").remove();
$("#UploadIDPos i").hide();
$('#UploadIDPos').prepend('<img id="IDPosImg" style="width: 140px; height: 80px;"/>');
var img = document.getElementById('IDPosImg');
img.src = FR.result;
uploadIDImage.IDPos.Files = FR.result.split(",")[1];
console.log("11111");
};
if(e.target.files[0]) {
FR.readAsDataURL(e.target.files[0]);
if(originalIDPosSize === undefined) {
var size = Math.round(e.target.files[0].size / 1024 / 1024);
originalIDPosSize = size;
}
else {
totalSize = totalSize + originalIDPosSize;
var size = Math.round(e.target.files[0].size / 1024 / 1024);
}
var remainSize …0
推荐指数
推荐指数
1
解决办法
解决办法
549
查看次数
查看次数
HTML Canvas：如何为折线图下的区域着色？
我正在尝试创建山形图（折线图和下面的区域被阴影化），但是，无论我如何尝试，阴影区域都不能覆盖整个区域。因为我的图表是一条开放路径，所以填写的结果是通过图表线的区域。
下面是我放在W3School上以演示该问题的示例代码。
我还在同一行上看到了其他一些问题，但是也遵循这些问题也会导致同样的问题。
var c = document.getElementById("myCanvas");
var ctx = c.getContext("2d");
ctx.beginPath();
ctx.moveTo(0,150);
ctx.lineTo(100,70);
ctx.lineTo(150,100);
ctx.lineTo(200,140);
ctx.lineTo(250,90);
ctx.lineTo(300,110);
ctx.fillStyle ="red";
ctx.fill();
ctx.stroke();<canvas id="myCanvas" width="300" height="150" style="border:1px solid #d3d3d3;">
Your browser does not support the HTML5 canvas tag.</canvas>0
推荐指数
推荐指数
1
解决办法
解决办法
1039
查看次数
查看次数
标签 统计
html5-canvas ×10
javascript ×9
html5 ×5
canvas ×4
jquery ×2
charts ×1
collision ×1
color-space ×1
colors ×1
gradient ×1
html ×1
image ×1
kineticjs ×1
math ×1