个人中心
gpt4 book ai didi

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

转载 作者：行者123 更新时间：2023-11-28 20:23:00 25 4
gpt4 key购买 nike

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

HTML 代码: 

<head>
<meta http-equiv="content-type" content="text/xml; charset=utf-8" />
<title>Quote It!</title>
<link rel = "stylesheet"
      type = "text/css"
  href = "passext.css" />
<script type = "text/javascript" src = "js2.js"></script>
</head>

<body>
<h1>It's as easy as One...Two...Three!</h1>
<div id = "instructions">
<p style = "text-align:center;">Instructions:</p>
<ol>
<li>Fill out quote and author fields, then press "Create Quote".</li>
<li>Adjust attributes and watch as it updates in real-time!</li>
<li>Click save and it will convert to a versatile image.</li>
</ol>
</div>
<div id = "tips_warnings">
<p style = "text-align:center;">Tips &amp; Warnings:</p>
<ul>
<li>Don't forget to add quotation marks!</li>
<li>Don't forget a dash before the author.</li>
<li>To create a new quote, hit "Reset", and fill out the form.</li>
</ul>
</div>
<form name = "personalize" id = "personalize">
<fieldset class = "person">
  <legend class = "legend">Personalize</legend>
  <p>
<label class = "uinfo">Quote (One you make up or one you know):</label>
  </p>
  <p>
    <textarea id = "quote"
    rows = "10"
    cols = "45"></textarea>
  </p>
  <p>
<label class = "uinfo">Author:</label>
<input type="text"
      id = "write_author"
  name = "author"
  value = "eg. (-Billy Joe)" 
      onclick = "this.value = ''"/>
  </p>
  <p>
<label class = "uinfo">Text Color:</label>
<select id = "selColor" onchange="myFunction()">
  <option value = "#ffffff">White</option>
  <option value = "#000000">Black</option>
  <option value = "#f09dee">Pink</option>
  <option value = "#ff0000">Red</option>
  <option value = "#1e4d0c">Green</option>
  <option value = "#00ff00">Neon Green</option>
  <option value = "#0000ff">Blue</option>
  <option value = "#00ffff">Cyan</option>
  <option value = "#ff00ff">Magenta</option>
  <option value = "#ffff00">Yellow</option>
  <option value = "#cccccc">Grey</option>
</select>
  </p>
  <p>
<label class = "uinfo">Text Style:</label>
<select id = "selStyle" onchange = "myFunction()">
  <option value = "default">None</option>
  <option value = "italic">Italics</option>
  <option value = "underline">Underline</option>
  <option value = "bold">Bold</option>
</select>
  </p>
  <p>
<label class = "uinfo">Background Color:</label>
<select id = "selBack" onchange = "myFunction()">
  <option value = "null">None</option>
  <option value = "#000000">Black</option>
  <option value = "#ff0000">Red</option>
  <option value = "#00ff00">Green</option>
  <option value = "#0000ff">Blue</option>
  <option value = "#00ffff">Cyan</option>
  <option value = "#ff00ff">Magenta</option>
  <option value = "#ffff00">Yellow</option>
  <option value = "#ffffff">White</option>
  <option value = "#cccccc">Grey</option>
</select>
  </p>
  <p>
    <label class = "uinfo">Border:</label>
    <select id = "selBorder" onchange="myFunction()">
  <option value = "none">None</option>
  <option value = "solid">Solid</option>
  <option value = "double">Double</option>
  <option value = "groove">Groove</option>
  <option value = "ridge">Ridge</option>
  <option value = "inset">Inset</option>
  <option value = "outset">Outset</option>
  <option value = "dashed">Dashed</option>
  <option value = "dotted">Dotted</option>
</select>
  </p>
  <p>
<label class = "uinfo">Border Width:</label>
<select id = "selWidth" onchange = "myFunction()">
  <option value = "500px">Large</option>
  <option value = "375px">Medium</option>
  <option value = "250px">Small</option>
</select>
  </p>
  <p>
<label class = "uinfo">Font:</label>
<select id = "selFont" onchange = "myFunction()">
  <option value = "Times New Roman">Times New Roman</option>
  <option value = "Serif">Serif</option>
      <option value = "Sans-Serif">Sans Serif</option>
  <option value = "Fantasy">Fantasy</option>
  <option value = "Monospace">Monospace</option>
  <option value = "Cursive">Cursive</option>
</select>
  </p>
  <p>
<label class = "uinfo">Font Size:</label>
<select id = "selSize" onchange = "myFunction()">
  <option value = "105%">13pt</option>
  <option value = "120%">14pt</option>
  <option value = "130%">15pt</option>
  <option value = "140%">16pt</option>
      <option value = "150%">18pt</option>
</select>
  </p>
  <p class = "create_quote">
    <input type = "button"
  value = "Create Quote"
  onclick = "myFunction()"/>
  <script type = "text/javascript" src = "js2.js"></script>
    <input type = "reset"/>
  </p>
</fieldset>
</form>
<canvas id = "blank">
  <p id = "blank1"></p>
  <p id = "author"></p>
</canvas>
<input type = "button"
  id = "save"
  value = "Save"
  onclick = "saveFuction()"/>
<script type = "text/javascript" src = "js2.js"></script>
</body>
</html>

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;
} else {
  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?");
} else {
  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");
} else {
  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();
}

如有任何帮助，我们将不胜感激。

最佳答案

您无法直接在 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/

25 4 0
文章推荐： python - 装箱(意思)
文章推荐： ios - AppDelegate 的 ViewController 内的 Preform 函数
文章推荐： ios - 关于 UIScrollView 和 AutoLayout 的困惑
文章推荐： python - 如何在 Python 中写入只读文件
行者123
个人简介

我是一名优秀的程序员,十分优秀！

滴滴打车优惠券免费领取
滴滴打车优惠券
全站热门文章
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com