使用 JavaScript 和 Canvas 实现 ColorPicker
我尝试使用 Canvas 实现 ColorPicker 只是为了好玩.但我似乎迷路了.因为我的浏览器由于所有这些 for 循环而在加载时冻结了一段时间.我正在添加此脚本结果的屏幕截图: window.onload = function(){颜色选择器();}函数颜色选择器(){var canvas = document.getElementById("colDisp"),框架 = canvas
..
canvas相关内容
使用 HTML5 画布为颜色选择创建渐变(所有可能的 RGB 颜色)
是否可以为线性颜色选择器增加包含所有可能的 RGB 颜色(只有红色、绿色、蓝色 - 没有 alpha 值)的线性渐变. 到目前为止，我已经尝试使用以下渐变，但它不包含从 rgb(0,0,0) 到 rgb(255,255,255) : var grd = ctx.createLinearGradient(0, 0, width, 0);grd.addColorStop(0, 'red');g
..
使用 Canvas 中的 arc() 方法产生的多余线条
函数绘制(){var canvas = document.getElementById('draw');如果(canvas.getContext){var ctx = canvas.getContext('2d');var ang=prompt("学位?")var sin=Math.sin(ang * Math.PI/180);var cos=Math.cos(ang *
..
HTML5画布drawImage使用点?
我需要使用 4 个点来绘制图像.我将这 4 个点存储在一个数组中，这些位置会发生变化.现在我需要绘制一个反映这些位置的图像.context.drawImage 只接受 1 个位置. 应该是这样，4个位置: x,y----------x,y||||||||||x,y---------x,y 解决方案 你要找的就是用 3D 渲染语言画一个四边形. 您通常将形状拆分为 2 个三角形(面
..
使用 Canvas 创建极地面积图
我正在尝试在这里使用画布创建极地区域图: http://jsfiddle.net/wm7pwL2w/2/ 代码: var myColor = ["#ff0", "#00f", "#002", "#003", "#004"];var myData = [10, 30, 20, 60, 40];var myRadius = [120, 80, 40, 70, 40];函数 getTota
..
在画布中的圆圈之间绘制垂直线
我想在我的项目中的圆圈之间画一条垂直线. 这些是我的代码: html:
..
fillStyle 不是函数
我收到一个不寻常的错误: ctx_wrap.fillStyle 不是函数 在这一行: ctx_wrap.fillStyle('#b8b8b8'); 在这里: ...this.paint = 函数() {self.path(ctx_wrap);如果(！isOver){ctx_wrap.fillStyle('#b8b8b8');} 别的 {ctx_wrap.fillStyle('#d
..
Html 5 Canvas 完整箭头
我正在使用 wPaint 插件，并尝试添加更多功能.我需要的是一条以“箭头"结尾的画线.我已经尝试了几乎所有我能想到的东西，但我只能得到箭头的一半(想象
..
html5画布弹性碰撞方块
我重新问这个问题，因为我没有在上一个问题中明确说明我想要什么. 有谁知道如何使用矩形在 Canvas 中进行弹性碰撞或处理碰撞?或者可以指出我正确的方向吗? 我创建了一个有多个正方形的画布，并且希望每个正方形在它们接触时偏转. 这是我放在一起展示给黑色缓冲画布的一个快速小提琴 http://jsfiddle.net/claireC/Y7MFq/10/ 第 39 行是我开始碰
..
制作模糊形状的 HTML 画布
我想使用 HTML 制作简单的形状.但是形状需要很大.而且画布是全屏的 示例:http://jsfiddle.net/xLgg43s9/1/embedded/result/ 代码:
..
图像未加载到画布上
我的问题是将本地托管的图像加载到画布上时遇到问题.我曾尝试在 Web 服务器上使用 XAMPP 和本地托管代码，但 LightBlue.jpg 图像似乎永远不会加载.但是，当我使用来自网站的外部图像时，代码可以完美运行.我在下面提供了一个示例. HTML:
..
如何使用 Fabric.js 自由绘制圆圈?
我正在使用 FabricJS 在画布上画圆: var circle = new fabric.Circle({radius: 100,充满: ''，中风:'红色'，行程宽度:3，originX: '中心',originY: '中心'});var text = new fabric.Text('HELLO WORLD.',{字体大小:30，originX: '中心',originY: '中心',填
..
HTML Canvas:同时绘制多个 getContext
我正在使用 websockets 构建一个工具，它允许多个用户在彼此的画布上“绘图".用户在画布上绘图，包含 mousedown/mouseup 事件和坐标的对象会立即推送给其他用户.然后将其绘制在他们的画布上，从而产生多个用户在同一位置绘图的效果. 它的工作原理与描述的一样:您可以观看某人绘制一些东西，然后绘制一些将出现在他们的画布中的东西.当您与其他人同时绘图时，就会出现问题. 对
..
在 3 层画布上绘制图像并保存
我有 3 层画布，我为每一层赋予了单独的 id. 这就是我正在做的. HTML
..
在画布单词搜索游戏中创建线条
我在画布中创建了单词搜索游戏.现在我想当用户选择字符来确定用于突出显示的单词绘制线，但这是我的结果: 和 我想像下面的图片一样画线:这是我本节的代码: 函数 checkForWord() {//获取开始 &结束网格单元//用户拖过的var startCol = parseInt(startX/colWidth);var startRow = parseInt(startY/rowH
..
HTML5 画布中最简单的幻灯片，canvas.context.clearRect 不适用于 setTimeout
这是一个非常简单的幻灯片的代码，它应该在 4 秒内显示 4 张图像，每秒一张图像.相反，我得到了 4 秒的延迟，然后所有图像都被绘制在彼此之上.我做错了什么? //4 张图片var image0 = new Image();image0.src = "img/image0.png";var image1 = new Image();imag
..
读取画布像素的 RGB 值
我在画布中放置了一个图像，当用户将鼠标移到图像上时，我想获取该图像像素的 RGB 值.这是我写的代码: 解决方案 试试这个: var color = document.getElementById("color");var canvas = document.getElementById("myCanvas");var context = canvas.getContext("2d"
..
HTML Canvas - 绘制曲线箭头
我正在尝试在 html 画布中绘制弯曲的箭头.我画一条曲线没有问题，但我不知道如何将 > 放在线的末尾(方向). ctx.beginPath();ctx.fillStyle = "rgba(55, 217, 56,"+ 不透明度 +")";ctx.moveTo(this.fromX,this.fromY);ctx.quadraticCurveTo(this.controlX, this.cont
..
HTML5 Canvas + 下标和上标
我想在画布中填充文本作为 Subscript 和 Superscript 选项.我如何做到这一点. 请帮忙. 解决方案 由于你不能在 drawText 中使用 HTML 你不能使用 和 子.而是必须自己做. 换句话说，当您想要上标时，您需要将字体更改为更小，或者在更高的 y 位置绘制文本，或者设置 textBaseline = "top".对于下标，你必须做类似的事
..
有没有一种更简单(并且仍然有效)的方法来通过最近邻重采样来放大画布渲染?
我对这个以最近邻格式放大画布渲染的看似简单的任务感到有些困惑，我在这里问过这个问题: 如何正确编写此着色器函数JS? 目标是像这样转换 3D 渲染输出: 像这样的像素艺术: 但在那个问题中，我问的是如何正确实施我选择的解决方案(本质上使用着色器来处理放大).也许我应该问:有没有更简单(并且仍然高效)的方法来做到这一点? 解决方案 我可以提供两种方法，可以使用最近邻有
..