相关疑难解决方法(0)

drawImage()不起作用

我正在阅读"使用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)

javascript canvas drawimage preloading

27
推荐指数
2
解决办法
3万
查看次数

Chart.js每个点的自定义图像

我正在使用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/

javascript charts chart.js

7
推荐指数
2
解决办法
7014
查看次数

标签 统计

javascript ×2

canvas ×1

chart.js ×1

charts ×1

drawimage ×1

preloading ×1