相关疑难解决方法(0)

如何清除画布以进行重绘

在尝试复合操作和在画布上绘制图像后,我现在正在尝试删除图像和合成.我该怎么做呢?

我需要清除画布以重绘其他图像; 这可以持续一段时间所以我不认为每次绘制一个新的矩形将是最有效的选择.

javascript html5 canvas composite html5-canvas

945
推荐指数
16
解决办法
82万
查看次数

如何使用javascript HTML5画布通过N个点绘制平滑曲线?

对于绘图应用程序,我将鼠标移动坐标保存到数组,然后使用lineTo绘制它们.生成的线条不平滑.如何在所有聚集点之间生成单条曲线?

我用谷歌搜索但我只找到了3个绘制线的函数:对于2个样本点,只需使用lineTo.对于3个样本点,quadraticCurveTo,对于4个样本点,bezierCurveTo.

(我尝试在阵列中每4个点绘制一个bezierCurveTo,但这会导致每4个采样点扭结,而不是连续的平滑曲线.)

如何编写一个函数来绘制一个包含5个样本点的平滑曲线?

javascript bezier canvas spline html5-canvas

114
推荐指数
7
解决办法
10万
查看次数

Html5画布动画不能正常工作

我想在画布上创建一个动画.它第一次工作正常,但是当通过setTimeout添加新元素时,所有元素的速度都会提高.谁能告诉我为什么这个速度在增加.小提琴链接

  var canvas = $("#canvas")[0],
    context = canvas.getContext("2d"),
    bloons = {},
    bloonIndex = 0;

var c_wdh = 360,
    c_hgt =  540;


function createBloon(x, y) {
  this.x = x;
  this.y = y; 
  this.vx = 1,
  this.vy = 3;
  bloonIndex++;
  bloons[bloonIndex] = this;
  this.id = bloonIndex;
}

createBloon.prototype.drawImage = function() {
   this.y -= this.vy;
   context.fillStyle = "#FF0000";
   context.fillRect(this.x, this.y, 50, 50);
   if(this.y <= -120){
      delete bloons[this.id];  
   }
};


var nob = 0;
var i = 1;
var rendorBloon = setInterval(function(){ 
    bloons[i] …
Run Code Online (Sandbox Code Playgroud)

javascript jquery html5 canvas

5
推荐指数
1
解决办法
252
查看次数

重绘HTML5画布非常慢

我刚刚开始玩HTML5画布,我希望能用它制作一些游戏.但是,一旦我开始将鼠标坐标渲染到它,它就会磨成近乎停顿的状态:

http://jsfiddle.net/mnpenner/zHpgV/

我所做的只是呈现38行和一些文本,它应该能够处理,不是吗?

难道我做错了什么?我希望能够以至少30 FPS渲染,但对于这样的东西,我希望它能够绘制1000次.

或者我只是使用错误的工具来完成工作?WebGL是否可以胜任这项任务?为什么一个比另一个慢得多?

String.prototype.format = function() {
    var args = arguments;
    return this.replace(/\{(\d+)\}/g, function(m, n) {
        return args[n];
    });
};
var $canvas = $('#canvas');
var c = $canvas[0].getContext('2d');
var scale = 20;
var xMult = $canvas.width() / scale;
var yMult = $canvas.height() / scale;
var mouseX = 0;
var mouseY = 0;
c.scale(xMult, yMult);
c.lineWidth = 1 / scale;
c.font = '1pt Calibri';

function render() {
    c.fillStyle = '#dcb25c';
    c.fillRect(0, 0, scale, scale);
    c.fillStyle = '#544423';
    c.lineCap …
Run Code Online (Sandbox Code Playgroud)

html5 canvas

4
推荐指数
3
解决办法
1万
查看次数

JS从一个圆的边缘到另一个圆的边缘画一条线

我试图在 HTML5 画布中从两个圆圈的边缘画一条线。所以,我知道两个圆的圆心坐标及其半径。

  1. 随机绘制的圆圈。
  2. 线应从一个圆的边缘移动到另一个圆。

请帮忙!

PS 抱歉我的英语:)

更新:

我正在尝试这个,但如何知道角度?

from_line_x = circle1.x + circle1.radius * Math.cos(Math.PI * angle);
from_line_y = circle1.y + cirlce1.radius * Math.sin(Math.PI * angle);
to_line_x = circle2.x - circle2.radius * Math.cos(Math.PI * angle);
to_line_y = circle2.y - circle2.radius * Math.sin(Math.PI * angle);
Run Code Online (Sandbox Code Playgroud)

更新2:

我想我找到了如何找到角度。但作为一个随机绘制的圆,所绘制的线并不总是正确的。那么算法应该怎样看呢?

再次对不起我的英语。

html javascript canvas html5-canvas

1
推荐指数
1
解决办法
5986
查看次数

标签 统计

canvas ×5

javascript ×4

html5 ×3

html5-canvas ×3

bezier ×1

composite ×1

html ×1

jquery ×1

spline ×1