标签: canvas
imagestring-获取以像素为单位的字符串长度的大小
您好，只想提前提到，这不是重复的。我已经看过类似的文章，但是所有这些文章都使用了特定的字体，但事实并非如此。我使用的是默认字体编号3（对于此示例），我希望能够计算输出大小并将其放在$ canvas的确切中心
imagestring($canvas,3,imagesx($canvas),imagesy($canvas),$myString,imagecolorallocate($canvas,239,13,177));
我知道如何进行计算以使其居中，这很容易，唯一遗漏的参数是考虑字体号3的字符串的精确像素大小（x / y）。考虑字体号3的字符串的像素（x / y） 3。
推荐指数
解决办法
查看次数
试图旋转画布,出了点问题
所以我试图在HTML5中制作一个很好的交互式地图,用于HTML5文档(跟踪电话分机,端口号等),因为我们的很多办公室和小隔间是相同的,我想我应该只有一个对于每种类型的办公室,然后只为它匹配的所有办公室复制它.我唯一的问题是,我无法正确旋转画布.我已经按照所有教程,但由于某种原因,我的图像不断被切断.我似乎无法找到问题的根源.
有任何想法吗？
到目前为止,这是我的代码:
<!DOCTYPE HTML>
<head>
<title>Test Interactive Office Schematic</title>
<style>
html, body {
margin: 0px;
padding: 0px;
}
</style>
</head>
<body>
<script>
function addOffice(type, id, occupentName) {
var canvas = document.createElement('canvas');
canvas.id = id;
canvas.style.position = "absolute";
canvas.style.left = "20px";
canvas.style.class = "office";
var context = canvas.getContext('2d');
context.beginPath();
context.moveTo(0, 0);
if (type == 1) {
canvas.width = 80;
canvas.height = 80;
context.lineTo(2, 0);
context.lineTo(2, 20);
context.quadraticCurveTo(22, 20, 22, 0);
context.lineTo(60, 0);
context.lineTo(60, 80);
context.lineTo(0, 80);
context.lineTo(0, 0);
} …推荐指数
解决办法
查看次数
哥特式尖拱css或帆布
我想知道是否有人知道用css或帆布设计哥特式尖拱的来源或方法.
编辑:我的尝试是设置画布quadraticCurveTo方法以适应哥特式弧.但我失败了,并没有胆量发布在这里:)
var canvas = document.getElementById('arch');
var context = canvas.getContext('2d');
context.beginPath();
context.moveTo(188, 150);
context.quadraticCurveTo(288, -100, 388, 150);
context.lineWidth = 20
context.strokeStyle = 'black';
context.stroke();
推荐指数
解决办法
查看次数
如何在数组中存储多个值？
我是 JavaScript 的新学习者。我想创建一个数组来存储一个对象的多个 x 和 y 值 (array[0])，然后使用该值与画布绘制对象的 x 和 y 坐标进行比较。
例如，我的固定 x 和 y 值如下： (x : y) 585 : 225 584 : 231 579 : 254 573 : 271 570 : 279 570 : 280
我将获取绘图对象的 x 和 y 坐标并与上述值进行比较。如果超过 3 组 x 和 y 值错误则显示：错误答案。有可能这样做吗？谢谢你！请帮忙...
这是编码：
<!DOCTYPE html>
<html><head>
<style>
#contain {
width: 500px;
height: 120px;
top : 15px;
margin: 0 auto;
position: relative;
}
</style>
<script>
var touchList = [];
var plates = [];
var …推荐指数
解决办法
查看次数
使用 HTML5 在 Canvas 上绘制图钉
我需要在画布上使用 HTML5绘制如下图钉：http : //www.clipartbest.com/clipart-9czEGGdRi。
这是我所拥有的：http : //jsfiddle.net/u5jNR/
var canvas = document.getElementById('myCanvas');
var context = canvas.getContext('2d');
var x = canvas.width / 2;
var y = canvas.height / 2;
var radius = 75;
var startAngle = .9 * Math.PI;
var endAngle = 2.1 * Math.PI;
var counterClockwise = false;
context.beginPath();
context.arc(x, y, radius, startAngle, endAngle, counterClockwise);
context.lineWidth = 15;
// line color
context.strokeStyle = 'black';
context.stroke();
var radius = 20;
context.beginPath();
context.arc(x, y, radius, 0, 2 * Math.PI, false);
context.fillStyle …推荐指数
解决办法
查看次数
我不知道为什么我得到一个"未定义不是函数"错误
所以我不知道为什么,在第35行,我得到这个错误,有人可以解释为什么这不起作用,因为我似乎无法弄清楚为什么？
这是其上传的网页的链接,您可以在控制台中看到错误消息,以及所有代码.http://matthew-hoyle.co.uk/files/beta/projects/platformer.php
window.onload = function() {
var canvas = document.getElementById("canvas");
var c = canvas.getContext("2d");
canvas.width = 800;
canvas.height = 600;
function Player() {
this.width = 20;
this.height = 20;
this.color = "red";
this.posY = (canvas.height / 2) - (this.height / 2);
this.posX = (canvas.width / 2) - (this.width / 2);
this.volY = 0;
this.volX = 0;
this.gravity = 0.5;
this.onGround = true;
this.draw = function() {this.posY += this.volY;
this.posX += this.volX;
this.volY += this.gravity;
c.fillStyle = this.color;
c.fillRect(this.posX, this.posY, …推荐指数
解决办法
查看次数
色轮选择器画布 javascript
我想用画布实现这样的目标
我想要实现的是我可以像这样生成色轮
$("#id").colorWheel({
width: 200,
height: 200
});
我已经尝试在谷歌上搜索它，但我找不到完美的色轮选择器，我只需要没有任何滑块的色轮，我已经尝试过 iro js，但我无法从插件中删除滑块，有人可以帮忙吗我用 javascript/Jquery 和画布创建这个色轮？
推荐指数
解决办法
查看次数
如何在HTML5 Canvas中绘制云的形状？
我正在使用HTML5 Canvas和javascript绘制不同形状的图形。但是我没有得到在HTML5Canvas中绘制云形状的计算方法。我正在尝试使用2点（即起点和终点）绘制云形状。请提出一些想法？谢谢
推荐指数
解决办法
查看次数
lineTo() 不工作
lineTo()功能对我不起作用，为什么？这是代码。
<canvas id="sid" height="1000px" width="1000px"> </canvas>
<script>
var can = document.querySelector('#sid');
var a = can.getContext('2d');
a.beginPath();
a.moveTo(0, 0);
a.lineTo(140, 140);
a.lineTo(160, 160);
</script>
推荐指数
解决办法
查看次数
推荐指数
解决办法
查看次数