相关疑难解决方法(0)

我想使用鼠标在HTML Canvas上绘图(例如:绘制签名,绘制名称,......)

请帮帮我怎么办？请提供一些源代码.谢谢

我正在尝试使用画布创建绘图区域.我在绘制曲线时让线条看起来很光滑时遇到了麻烦,而且我的算法中的线条粗细也有变化,看起来很糟糕,因为尺寸跳跃也很多,你可以看到尺寸变化的地方.我确实在stackoverflow上找到了这个链接,但这是一个原生的iPhone应用程序,我无法搞清楚.

这是我目前的JS代码.这是在jsFiddle上运行的

var xStart,
xEnd,
yStart,
yEnd,
paint,
ctx;
$(document).ready(function (){

   ctx = $('canvas')[0].getContext("2d");
   ctx.strokeStyle = '#000';
   ctx.lineJoin="round";
   ctx.lineCap="round";
   ctx.lineWidth = 1;


   $('canvas').bind('mousedown mousemove mouseup mouseleave touchstart touchmove touchend', function(e){
        var orig = e.originalEvent;

        if(e.type == 'mousedown'){
            e.preventDefault(); e.stopPropagation();

            xStart = e.clientX - $(this).offset().left;
            yStart = e.clientY - $(this).offset().top;
            xEnd = xStart;
            yEnd = yStart;

            paint = true;
            draw(e.type);

        }else if(e.type == 'mousemove'){
            if(paint==true){
                xEnd = e.clientX - $(this).offset().left;
                yEnd = e.clientY - $(this).offset().top; …

下面的代码正确绘制,但它绘制到错误的坐标.它应该绘制鼠标所在的位置.我无法发现我的错误.谢谢.

的jsfiddle

container.mousedown(function(e) {

    var parentOffset = $(this).offset(); 
    var x = e.pageX - parentOffset.left;
    var y = e.pageY - parentOffset.top;

    context_temp.beginPath();
    context_temp.moveTo(x, y);
    started = true;
});

container.mousemove(function(e) {

    var parentOffset = $(this).offset(); 
    var x = e.pageX - parentOffset.left;
    var y = e.pageY - parentOffset.top;

    if (started) {
        context_temp.lineTo(x, y);
        context_temp.stroke();
    }
});

container.mouseup(function(e) {

    var parentOffset = $(this).offset(); 
    var x = e.pageX - parentOffset.left;
    var y = e.pageY - parentOffset.top;

    if (started) {
        container.mousemove(x, y);
        started = false;
        update(); …

是否有一个javascript库,可以让我在网页上绘制,然后保存该绘图的状态？

我想使用鼠标绘制2D图像,然后如何存储和加载该绘图

我正在尝试使用fabric.js在画布上绘制一个免费的绘图,但我无法在我这边自由绘制像喷雾,圆圈,纹理模式我使用此代码只有铅笔模式绘图工作,但当我选择喷雾和模式绘制为铅笔的其他模式.

这是我的HTML 这里是小提琴墨水

            <label for="drawing-mode-selector">Mode:</label>
            <select id="drawing-mode-selector">
              <option>Pencil</option>
              <option>Circle</option>
              <option>Spray</option>
              <option>Pattern</option>

              <option>hline</option>
              <option>vline</option>
              <option>square</option>
              <option>diamond</option>
              <option>texture</option>
            </select><br>
            <label for="drawing-line-width">Line width:</label>
            <input type="range" value="30" min="0" max="150" id="drawing-            line-width"><br>
            <label for="drawing-color">Line color:</label>
            <input type="color" value="#005E7A" id="drawing-color"><br>
            <label for="drawing-shadow-width">Line shadow width:</label>
            <input type="range" value="0" min="0" max="50" id="drawing-shadow-width"><br>
          </div>
        </li>

这是我的脚本代码

     var canvas = new fabric.Canvas('canvas')
     var drawingModeEl = document.getElementById('drawing-mode'),
      drawingOptionsEl = document.getElementById('drawing-mode-options'),
      drawingColorEl = document.getElementById('drawing-color'),
      drawingLineWidthEl = document.getElementById('drawing-line-width'),
      drawingShadowWidth = document.getElementById('drawing-shadow-width');

     drawingModeEl.onclick = function() {
    canvas.isDrawingMode = !canvas.isDrawingMode;
    if (canvas.isDrawingMode) {
      drawingModeEl.innerHTML = …

我很难想到这一点

假设你有一个用JS构建的草图应用程序.例如:http://intridea.github.com/sketch.js/

并且您希望在绘制内容后存储用户的绘图.因此,每当有人访问该网站时,它都会加载所有以前的图纸.实时多用户绘图有点伪造,因为目前实时制作并不是一种选择.

服务器端我正在使用PHP和MySQL,我不知道这是否有用.

谢谢.