Trung tâm cá nhân
sách gpt4 ai đã đi

javascript - 如何在 Canvas 上绘制两段 div

In lại 作者：行者123 更新时间：2023-11-28 20:23:00 26 4
mua khóa gpt4 Nike

我正在尝试将整个两段 div 绘制到 Canvas 上。我主要在将 div 放在 Canvas 上而无需使用所有 Canvas 标签并绘制每一行时遇到问题。我认为这是可能的，如果不可行请告诉我。我对 Javascript 和 Php 处于中级水平，对 HTML 有经验，但对 canvas 很陌生，所以尽量保持简单。

HTML 代码: 

<đầu>

Quote It!

      type = "text/css"
  href = "passext.css" />




It's as easy as One...Two...Three!


Instructions:


  • Fill out quote and author fields, then press "Create Quote".

  • Adjust attributes and watch as it updates in real-time!

  • Click save and it will convert to a versatile image.




    • Tips & Warnings:


    • Don't forget to add quotation marks!

    • Don't forget a dash before the author.

    • To create a new quote, hit "Reset", and fill out the form.





      Personalize
      


      

      

        
        rows = "10"
        cols = "45">
      

      



          id = "write_author"
      name = "author"
      value = "eg. (-Billy Joe)" 
          onclick = "this.value = ''"/>
      

      



      
      
      
      

      

      



      
      
      
      
      
      
      
      
      

      

      



      
      
          
      
      
      

      

      



      value = "Create Quote"
      onclick = "myFunction()"/>
      
        
      




      

      



      id = "save"
      value = "Save"
      onclick = "saveFuction()"/>



    Javascript代码:

    function myFunction(){
    var quote, quote1, fsize, fsize1, fColor, fcolor1, bcolor, bcolor1, font, font1, width, width1, border, border1, author, author1, author2, format, fstyle, fstyle1;
    format = document.getElementById("blank");
    var context = format.getContext("2d");
    quote=document.getElementById("quote");
    quote1=quote.value;
    outPut = document.getElementById("blank1");
    if (quote1 != "") {
      outPut.innerHTML = quote1;
    } khác {
      alert("You need to enter a quote!");
    }

    author = document.getElementById("write_author");
    author1 = author.value;
    author2 = document.getElementById("author")
    if (author1 == "" || author1 == "eg. (-Billy Joe)") {
      alert("Who wrote this?");
    } khác {
      author2.innerHTML = author1;
    }

    fcolor = document.getElementById("selColor");
    fcolor1 = fcolor.value;
    format.style.color=(fcolor1);

    fstyle = document.getElementById("selStyle");
    fstyle1 = fstyle.value;
    if (fstyle1 == "italic") {
      format.style.fontStyle=("italic");
      format.style.textDecoration=("");
      format.style.fontWeight=("");
    } else if (fstyle1 == "underline"){
        format.style.textDecoration=("underline");
        format.style.fontStyle=("");
        format.style.fontWeight=("");
      } else if (fstyle1 == "bold") {
          format.style.fontWeight=("bold");
    format.style.textDecoration=("");
    format.style.fontStyle = ("");
        } else if (fstyle1 == "default") {
      format.style.fontWeight=("");
      format.style.textDecoration=("");
      format.style.fontStyle = ("");
    }

    bcolor = document.getElementById("selBack");
    bcolor1 = bcolor.value;
    format.style.backgroundColor=(bcolor1);

    border = document.getElementById("selBorder");
    border1 = border.value;
    format.style.border=( border1);
    if (border1 == "dashed") {
      format.style.borderWidth=("3px");
    } khác {
      format.style.borderWidth=("5px");
    }

    width = document.getElementById("selWidth");
    width1 = width.value;
    format.style.width=(width1);

    if (width1 == "375px") {
      document.getElementById("blank").style.position = "absolute";
      document.getElementById("blank").style.left = "962.5px";
    }else if (width1 == "250px") {
      document.getElementById("blank").style.position = "absolute";
      document.getElementById("blank").style.left = "1025px";
    }else if (width1 == "500px") {
      document.getElementById("blank").style.position = "absolute";
      document.getElementById("blank").style.left = "900px";
    }
    font = document.getElementById("selFont");
    font1 = font.value;
    format.style.fontFamily=(font1);

    fsize = document.getElementById("selSize");
    fsize1 = fsize.value;
    format.style.fontSize=(fsize1);
    }

    function saveFunction(){
      format.location.href = format.toDataURL();
    }

    Bất kỳ sự giúp đỡ nào cũng sẽ được đánh giá cao.

    1 Câu trả lời

    您无法直接在 Canvas 上绘制 html 元素。

    您必须学习/使用 Canvas 绘图命令。

    但是，有些人已经成功使用这个在 Canvas 上模拟 html 元素的库:

    http://html2canvas.hertzen.com/

    您可能还想知道出于安全原因，canvas.toDataURL 不允许您将图像数据保存到用户的本地文件系统。

    或者，

    那里有很多屏幕抓取器。 SnagIt 是一个不错的:http://www.techsmith.com/snagit.html

    关于javascript - 如何在 Canvas 上绘制两段 div，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/17929753/

    26 4 0
    Bài viết được đề xuất: python - 装箱(意思)
    Bài viết được đề xuất: ios - AppDelegate 的 ViewController 内的 Preform 函数
    Bài viết được đề xuất: ios - 关于 UIScrollView 和 AutoLayout 的困惑
    Bài viết được đề xuất: python - 如何在 Python 中写入只读文件
    行者123
    Hồ sơ cá nhân

    Tôi là một lập trình viên xuất sắc, rất giỏi!

    Nhận phiếu giảm giá Didi Taxi miễn phí
    Mã giảm giá Didi Taxi
    Các bài viết nóng hổi trên toàn bộ trang web
    Giấy chứng nhận ICP Bắc Kinh số 000000
    Hợp tác quảng cáo: 1813099741@qq.com 6ren.com