画布绘图大小需要修复
canvas drawing size fix needed
在我的画布上,当你改变大小时,我有它,所以你可以从1到100,但我有它所以它在5秒内上升,但当你达到1并再次上升时,它会上升到6,然后再次上升,然后上升到11,依此类推。
给你http://jsfiddle.net/daniel9000/tsaytohj/2/
这是我的java脚本
function processData(c1, c2) {
var cv1 = document.getElementById(c1).value;
var cv2 = document.getElementById(c2).value;
alert(cv1 + "'n" + cv2);
}
var canvas = document.getElementById('canvas');
var context = canvas.getContext('2d');
var radius = 10;
var dragging = false;
canvas.width = window.innerWidth;
canvas.height = window.innerHeight;
context.lineWidth = radius * 2;
var putPoint = function (e) {
if (dragging) {
var bounds = canvas.getBoundingClientRect();
var mouseX = e.clientX + bounds.left;
var mouseY = e.clientY - bounds.top;
var mouseX = e.clientX + bounds.left - 0;
context.lineTo(mouseX, mouseY)
context.strokeStyle = document.getElementById('color1').value;
context.stroke();
context.beginPath();
context.arc(mouseX, mouseY, radius, 0, Math.PI * 2);
context.fillStyle = document.getElementById('color1').value;
context.fill();
context.beginPath();
context.moveTo(mouseX, mouseY);
}
}
var engage = function (e) {
dragging = true;
putPoint(e);
}
var disengage = function () {
dragging = false;
context.beginPath();
}
canvas.addEventListener('mousedown', engage);
canvas.addEventListener('mousemove', putPoint);
canvas.addEventListener('mouseup', disengage);
var setRadius = function (newRadius) {
if (newRadius < minRad) newRadius = minRad;
else if (newRadius > maxRad) newRadius = maxRad;
radius = newRadius;
context.lineWidth = radius * 2;
radSpan.innerHTML = radius;
}
var minRad = 1,
maxRad = 100,
defaultRad = 20,
interval = 5,
radSpan = document.getElementById('radval'),
decRad = document.getElementById('decrad'),
incRad = document.getElementById('incrad');
decRad.addEventListener('click', function () {
setRadius(radius - interval);
});
incRad.addEventListener('click', function () {
setRadius(radius + interval);
});
setRadius(defaultRad);
var button = document.getElementById('btn-download');
button.addEventListener('click', function (e) {
var dataURL = canvas.toDataURL('image/png');
button.href = dataURL;
});
这真的很简单。我建议这样做:
decRad.addEventListener('click', function () {
setRadius(radius - interval);
});
incRad.addEventListener('click', function () {
setRadius(radius < interval ? interval : radius + interval);
});
这是因为您设置了minRad=1,它不在5的倍数序列中,可能是为了避免半径为零。所以当你加5的时候,你得到的是6而不是5。您有几种可能的解决方案:
- 设置minRad=0
- 只允许最小半径为5,即minRad=5
-
如果不是上述任一项,则必须使用不按顺序的最小值进行补偿,方法是将
radius = newRadius;
替换为:radius = newRadius; if( radius == 6) radius = 5;
相关文章:
- Canvas Html5绘图应用程序,移动画布会导致重大问题
- HTML画布在绘图后立即擦除矩形
- 如何在JS Leatflet绘图插件中获取圆的坐标
- 在一个页面中具有多个捕捉绘图和捕捉内容
- SVG手写字母绘图动画
- 绘图悬停文本未显示
- 为画布绘图添加鼠标事件
- 如何强制绘图将x轴编号显示为类别
- 绘图应用程序-单击工具更改光标
- 重置transform:rotate(),方法是移除并追加在追加和重绘图表后未显示数据的画布
- Highcharts多个Y轴绘图带碰撞
- 如何使用画布和javascript使绘图移动
- highcharts IE8重绘图表问题
- OpenOffice绘图:增强的几何图形解析
- 如果谷歌地图绘图(如onDraw)触发什么事件
- Fabricjs在绘图时连接线条
- 高图表可拖动的绘图线与对数轴刻度
- 如何使用 THREE.js/WebGL 将 2D 绘图转换为 3Drawing
- 如何删除leaflet.draw中的绘图层
- 如何以绘图表格式输出PHP结果