我正在阅读"使用HTML5,CSS3和Javascript制作等距社交实时游戏".
我不是很远,而且我遇到了一个画布问题,这个问题让我在一天中的大部分时间都难过.
drawImage()似乎没有绘制.我已经研究过这个问题并尝试了许多预加载图像的排列,但到目前为止还没有任何工作.
这是我的代码:
HTML:
<canvas id="game" width="100" height="100">
Your browser doesn't include support for the canvas element.
</canvas>
Run Code Online (Sandbox Code Playgroud)
CSS:
html {
height:100%;
overflow:hidden
}
body {
margin:0px;
padding:0px;
height:100%;
}
Run Code Online (Sandbox Code Playgroud)
和js:
window.onload = function() {
var canvas = document.getElementById('game');
canvas.width=document.body.clientWidth;
canvas.height=document.body.clientHeight;
var c = canvas.getContext('2d');
function showIntro() {
var phrase = "Click or tap screen to start";
c.clearRect (0, 0, canvas.width, canvas.height);
var grd = c.createLinearGradient(0, 0, canvas.width, canvas.height);
grd.addColorStop(0, "#9db7a0");
grd.addColorStop(1, "#e6e6e6");
c.fillStyle = grd;
c.fillRect (0, 0, …Run Code Online (Sandbox Code Playgroud) 我正在使用Chart.js,我正在寻找散点图上每个点的自定义图像的帮助.我已经尝试使用javascript数组图像,但它无法正常工作.我是canvas和html5的新手.
我想要的是每个点都是用户的小型图片而不是圆圈.
一个例子将不胜感激.
我目前有:
var ctx = document.getElementById("member-graph-scatter");
var myChart = new Chart(ctx, {
type: 'line',
data: {
datasets: [{
label: 'Miles / Feet',
data: [<?php echo $member_scatter_graph_miles_climbing; ?>],
backgroundColor: "rgba(255,99,132,0.6)",
borderColor: "rgba(75,192,192,1)",
}]
},
options: {
scales: {
yAxes: [{
scaleLabel: {
display: true,
labelString: 'Feet Climbed (ft)'
}
}],
xAxes: [{
scaleLabel: {
display: true,
labelString: 'Miles Ridden (miles)'
},
type: 'linear',
position: 'bottom'
}]
},
showLines: false
}
});
Run Code Online (Sandbox Code Playgroud)
此图表工作正常,但这些点显然是默认圆圈.
根据我需要使用的文档:
"如果选项是图像,则使用drawImage在画布上绘制该图像.图像,数组"可在以下网址查看:http://www.chartjs.org/docs/