天道酬勤,学无止境

如何在HTML5 canvas元素上编写文本?(How can I write text on a HTML5 canvas element?)

问题

是否可以在HTML5 canvas上编写文本?

回答1

 var canvas = document.getElementById("my-canvas"); var context = canvas.getContext("2d"); context.fillStyle = "blue"; context.font = "bold 16px Arial"; context.fillText("Zibri", (canvas.width / 2) - 17, (canvas.height / 2) + 8);
 #my-canvas { background: #FF0; }
 <canvas id="my-canvas" width="200" height="120"></canvas>
回答2

在画布上绘制文本

标记:

<canvas id="myCanvas" width="300" height="150"></canvas>

脚本(有几个不同的选项):

<script>
    var canvas = document.getElementById('myCanvas');
    var ctx = canvas.getContext('2d');
    ctx.font = 'italic 18px Arial';
    ctx.textAlign = 'center';
    ctx. textBaseline = 'middle';
    ctx.fillStyle = 'red';  // a color name or by using rgb/rgba/hex values
    ctx.fillText('Hello World!', 150, 50); // text and position
</script>

查看MDN文档和此JSFiddle示例。

回答3

Canvas文本支持实际上非常好-您可以控制fontsizecolorhorizontal alignmentvertical alignment ,还可以获取文本指标以获取以像素为单位的文本宽度。 此外,您还可以使用画布transformsrotatestretch甚至invert文本。

回答4

在画布上写文本真的很容易。 目前尚不清楚是否要有人在HTML页面中输入文本,然后将该文本显示在画布上,或者是否要使用JavaScript将信息写入屏幕。

以下代码将以不同的字体和格式向画布中写入一些文本。 您可以根据需要对它进行修改,以测试在画布上进行书写的其他方面。

 <canvas id="YourCanvasNameHere" width="500" height="500">Canvas not supported</canvas>

 var c = document.getElementById('YourCanvasNameHere');
 var context = c.getContext('2d'); //returns drawing functions to allow the user to draw on the canvas with graphic tools. 

您可以将画布ID标记放置在HTML中,然后引用名称,也可以在JavaScript代码中创建画布。 我认为在大多数情况下,我会在HTML代码中看到<canvas>标记,有时还会看到它在JavaScript代码本身中动态创建。

代码:

  var canvas = document.getElementById('myCanvas');
  var context = canvas.getContext('2d');

  context.font = 'bold 10pt Calibri';
  context.fillText('Hello World!', 150, 100);
  context.font = 'italic 40pt Times Roman';
  context.fillStyle = 'blue';
  context.fillText('Hello World!', 200, 150);
  context.font = '60pt Calibri';
  context.lineWidth = 4;
  context.strokeStyle = 'blue';
  context.strokeText('Hello World!', 70, 70);
回答5

我猜取决于您要使用的功能。 如果只想写一些普通的文本,可以使用.fillText()

回答6

是的,您当然可以轻松地在画布上写文本,并且可以设置字体名称,字体大小和字体颜色。 有两种在Canvas上构建文本的方法,即fillText()和strokeText() 。 fillText()方法用于制作只能用颜色填充的文本,而strokeText()用于制作只能被赋予轮廓颜色的文本。 因此,如果我们要构建一个充满颜色并具有轮廓色的文本,则必须同时使用它们。

这里是完整的示例,如何在画布上写文本:

<canvas id="Canvas01" width="400" height="200" style="border:2px solid #bbb; margin-left:10px; margin-top:10px;"></canvas>

<script>
  var canvas = document.getElementById('Canvas01');
  var ctx = canvas.getContext('2d');

  ctx.fillStyle= "red";
  ctx.font = "italic bold 35pt Tahoma";
  //syntax : .fillText("text", x, y)
  ctx.fillText("StacOverFlow",30,80);

</script>

在此进行演示,您可以尝试自己进行任何修改:http://okeschool.com/examples/canvas/html5-canvas-text-color

回答7

我在oreilly.com上找到了一个很好的教程。

示例代码:

<canvas id="canvas" width ='600px'></canvas><br />
Enter your Text here .The Text will get drawn on the canvas<br />
<input type="text" id="text" onKeydown="func();"></input><br />
</body><br />
<script>
function func(){
var e=document.getElementById("text"),t=document.getElementById("canvas"),n=t.getContext("2d");
n.fillStyle="#990000";n.font="30px futura";n.textBaseline="top";n.fillText(e.value,150,0);n.fillText("thank you, ",200,100);
n.fillText("Created by ashish",250,120)
}
</script>

礼貌:@Ashish Nautiyal

回答8

将文字写到画布上很容易。 可以说您的画布的声明如下。

<html>
  <canvas id="YourCanvas" width="500" height="500">
   Your Internet Browser does not support HTML5 (Get a new Browser)
  </canvas>
</html>

这部分代码将变量返回到canvas中,该变量是HTML中画布的表示形式。

  var c  = document.getElementById("YourCanvas");

以下代码返回在画布上绘制线条,文本和填充的方法。

  var ctx = canvas.getContext("2d");

<script>
  ctx.font="20px Times Roman";
  ctx.fillText("Hello World!",50,100);

  ctx.font="30px Verdana";

  var g = ctx.createLinearGradient(0,0,c.width,0);

  g.addColorStop("0","magenta");
  g.addColorStop("0.3","blue");
  g.addColorStop("1.0","red");

  ctx.fillStyle=g; //Sets the fille of your text here. In this case it is set to the gradient that was created above. But you could set it to Red, Green, Blue or whatever.

  ctx.fillText("This is some new and funny TEXT!",40,190);
</script>

亚马逊上有关于kindle的初学者指南,网址为http://www.amazon.com/HTML5-Canvas-Guide-Beginners-ebook/dp/B00JSFVY9O/ref=sr_1_4?ie=UTF8&qid=1398113376&sr=8-4&keywords=html5 +画布+初学者非常值得。 我是几天前购买的,它向我展示了许多非常有用的简单技术。

标签

受限制的 HTML

  • 允许的HTML标签:<a href hreflang> <em> <strong> <cite> <blockquote cite> <code> <ul type> <ol start type> <li> <dl> <dt> <dd> <h2 id> <h3 id> <h4 id> <h5 id> <h6 id>
  • 自动断行和分段。
  • 网页和电子邮件地址自动转换为链接。

相关推荐
  • 如何修复HTML5画布中的模糊文本?(How do I fix blurry text in my HTML5 canvas?)
    问题 我总的n00b HTML5和我有工作canvas渲染形状,颜色和文字。 在我的应用程序中,我有一个视图适配器,可以动态创建画布,并用内容填充它。 效果非常好,除了我的文本非常模糊/模糊/拉伸。 我还看到了许多其他文章,说明为什么在CSS定义宽度和高度会导致此问题,但我在javascript都定义了这些内容。 相关代码(查看小提琴): var width = 500;//FIXME:size.w; var height = 500;//FIXME:size.h; var canvas = document.createElement("canvas"); //canvas.className="singleUserCanvas"; canvas.width=width; canvas.height=height; canvas.border = "3px solid #999999"; canvas.bgcolor = "#999999"; canvas.margin = "(0, 2%, 0, 2%)"; var context = canvas.getContext("2d"); ////////////////// //// SHAPES //// ////////////////// var left = 0; //draw zone 1 rect context
  • 在HTML5画布上绘制旋转文本(Drawing rotated text on a HTML5 canvas)
    问题 我正在开发的Web应用程序的一部分要求我创建条形图以显示各种信息。 我认为,如果用户的浏览器具有功能,则可以使用HTML5 canvas元素绘制它们。 我没有为我的图形绘制线条和条形的问题,但是当涉及到标注轴,条形或线的标签时,我遇到了麻烦。 如何将旋转的文本绘制到画布元素上,使其与要标记的项目对齐? 几个示例包括: 逆时针旋转文本90度以标记y轴逆时针旋转文本90度以在垂直条形图上标记条形图任意旋转文本以标记折线图上的线 任何指针将不胜感激。 回答1 就像其他人提到的那样,您可能想看看重用现有的图形解决方案,但是旋转文本并不是太困难。 (对我而言)有些令人困惑的一点是,您旋转了整个上下文然后在其上进行绘制: ctx.rotate(Math.PI*2/(i*6)); 角度以弧度为单位。 该代码取自该示例,我相信该示例是为MDC画布教程的转换部分制作的。 请参阅下面的答案以获取更完整的解决方案。 回答2 发布此信息是为了帮助有类似问题的其他人。 我通过五步方法解决了这个问题-保存上下文,转换上下文,旋转上下文,绘制文本,然后将上下文还原为其保存状态。 我认为平移和转换为上下文是操纵覆盖在画布上的坐标网格。 默认情况下,原点(0,0)从画布的左上角开始。 X从左到右增加,Y从上到下增加。 如果您用左手的食指和拇指做一个“ L”,并在您的拇指向下的情况下将其按住在您的面前
  • HTML5 & CSS3 初学者指南(4) – Canvas使用
    介绍传统的HTML主要用于文本的创建,可以通过<img>标签插入图像,动画的实现则需要第三方插件。在这方面,传统的HTML极其缺乏满足现代网页多媒体需求的能力。HTML5的到来,带来了新的成员<canvas>标签。 什么是 Canvas?HTML5 的 Canvas 元素使用 JavaScript 在网页上绘制图像。画布是一个矩形区域,你可以控制其每一像素。canvas 拥有多种绘制路径、矩形、圆形、字符以及添加图像的方法。 创建 Canvas 元素向 HTML5 页面添加 Canvas 元素。规定元素的 id、宽度和高度:<canvas id="myCanvas" width="200" height="100"></canvas> 通过 JavaScript 来绘制Canvas 元素本身是没有绘图能力的。所有的绘制工作必须在 JavaScript 内部完成:<script type="text/javascript">var c=document.getElementById("myCanvas");var cxt=c.getContext("2d"); cxt.fillStyle="#FF0000"; cxt.fillRect(0,0,150,75);</script>首先,JavaScript 使用 id 来寻找 Canvas 元素:var c=document
  • HTML5画布与SVG与div(HTML5 Canvas vs. SVG vs. div)
    问题 即时创建元素并能够四处移动的最佳方法是什么? 例如,假设我要创建一个矩形,圆形和多边形,然后选择这些对象并四处移动。 我了解HTML5提供了三个使之成为可能的元素:svg,canvas和div。 对于我想做什么,这些元素中的哪一个将提供最佳性能? 为了比较这些方法,我正在考虑创建三个视觉上相同的网页,每个网页中都有页眉,页脚,小部件和文本内容。 第一页中的小部件将完全使用canvas元素创建,第二页将完全使用svg元素创建,而第三页将使用纯div元素HTML和CSS创建。 回答1 简短的答案: SVG对您来说将更加容易,因为已经内置了选择和移动它的功能。SVG对象是DOM对象,因此它们具有“ click”处理程序等。 DIV可以,但是笨重,并且在大量情况下具有糟糕的性能加载。 Canvas具有最佳的性能,但是您必须自己实现托管状态(对象选择等)的所有概念,或者使用库。 长答案: HTML5 Canvas只是位图的绘图表面。 您设置进行绘制(用颜色和线条粗细说),绘制该东西,然后Canvas不知道该东西:它不知道它在哪里或刚刚绘制的是什么,它是只是像素。 如果要绘制矩形并使其移动或可以选择,则必须从头开始编写所有代码,包括要记住已绘制矩形的代码。 另一方面,SVG必须维护对其呈现的每个对象的引用。 您创建的每个SVG / VML元素都是DOM中的真实元素。 默认情况下
  • 如何找到HTML画布上文本的高度?(How can you find the height of text on an HTML canvas?)
    问题 规范中有一个context.measureText(text)函数,该函数将告诉您打印该文本需要多少宽度,但是我找不到找到高度的方法。 我知道它是基于字体的,但是我不知道将字体字符串转换为文本高度。 回答1 更新-作为此工作的示例,我在Carota编辑器中使用了此技术。 继ellisbben的回答之后,这是一个增强版本,可从基线获得上升和下降,即与Win32的GetTextMetric API返回的tmAscent和tmDescent相同。 如果您想用不同字体/大小的跨度进行文字包装的文本,则需要这样做。 上面的图像是在Safari中的画布上生成的,红色是指示画布绘制文本的最上面一行,绿色是基线,蓝色是底部(所以红色到蓝色是完整高度)。 使用jQuery简洁: var getTextHeight = function(font) { var text = $('<span>Hg</span>').css({ fontFamily: font }); var block = $('<div style="display: inline-block; width: 1px; height: 0px;"></div>'); var div = $('<div></div>'); div.append(text, block); var body = $('body'); body
  • 如何在IE中使用HTML5 canvas元素?(How can I use the HTML5 canvas element in IE?)
    问题 我正在尝试使用HTML5 canvas元素绘制一些弧和圆-这在FF中效果很好,但IE8似乎不支持它。 现在,存在一些Javascript库,这些库似乎使IE8与Canvas兼容。 可以在此处找到示例。 我已经阅读了他们的全部资料,但我不明白他们是如何使Canvas与IE8一起工作的。 有人可以说明一下使用的方法吗? 回答1 该页面使用的是excanvas-一个JS库,可使用IE的VML渲染器模拟canvas元素。 请注意,在Internet Explorer 9中,canvas标记是本机支持的! 有关详细信息,请参见MSDN文档。 回答2 您可以尝试使用fxCanvas:https://code.google.com/p/fxcanvas/ 它在Flash填充程序中实现了几乎所有的Canvas API。 回答3 您可以使用新发布的IE浏览器Chrome Frame插件,但是它要求HTML 5网站包含启用该插件的特殊meta标签。 http://code.google.com/chrome/chromeframe/ Chrome浏览器内嵌框架似乎使用了探索画布(excanvas.js)。 回答4 当前,ExplorerCanvas是模拟IE6、7和8的HTML5画布的唯一选择。您也对它的性能很不满意,这是很差的。 我发现了一个粒子模拟程序,它对Google Chrome
  • HTML5 + CSS3面试题整理
    HTML5 + CSS3面试题集锦 1.HTML5面试题 1.1 H5的新特性有哪些 画布(Canvas) API地理(Geolocation) API音频、视频API(audio,video)localStorage和sessionStoragewebworker和 websocketheader,nav,footer,aside,article,sectionweb worker是运行在浏览器后台的js程序,他不影响主程序的运行,是另开的一个js线程,可以用这个线程执行复杂的数据操作,然后把操作结果通过postMessage传递给主线程,这样在进行复杂且耗时的操作时就不会阻塞主线程了 1.2 Label的作用是什么?是怎么用的? label标签来定义表单控制间的关系,当用户选择该标签时,浏览器会自动将焦点转到和标签相关的表单控件上。 <label for="Name">Number:</label> <input type=“text“name="Name" id="Name"/> <label>Date:<input type="text" name="B"/></label> 1.3 HTML5的form如何关闭自动完成功能 给不想要提示的 form 或某个 input 设置为 autocomplete=off 1.4 dom如何实现浏览器内多个标签页之间的通信? (阿里)
  • HTML学习笔记之HTML5(六)
    1、什么是HTML5 HTML5是最新的HTML标准HTML5是专门为承载丰富的Web内容而设计的,并且无需额外插件HTML5拥有新的语义,图形以及多媒体元素HTML5提供的新元素和新的API简化了Web应用程序的搭建HTML5是跨平台的,被设计为在不同类型的硬件(PC、平板、电视、手机等)之上运 2、HTML5新内容 2.1 声明< DOCTYPE> HTML5新文档声明很简单,即为< ! DOCTYPE html>HTML5 中默认的字符编码是 UTF-8。 2.2 把 HTML5 元素定义为块级元素 所以需要把display设置为block,以确保就浏览器可以正常显示样式 <style style="text/css"> header, section, footer, aside, nav, main, article, figure{ display: block; } </style > 2.3Internet Explorer 的问题 所有现代浏览器均支持 HTML5 语义元素。由于Internet Explorer 8 以及更早的版本,不允许对位置元素添加样式,为了解决这个问题可以使用: <!--[if lt IE 9]> <script src="http://html5shiv.googlecode.com/svn/trunk/html5.js"><
  • 如何在HTML5(或Fabric.js)中制作Rooftext效果和Valley文字效果(How to make rooftext effect and valley text effect in HTML5 (or Fabric.js))
    问题 我正在使用以下代码: <script type='text/javascript'>//<![CDATA[ window.onload=function(){ /// (c) Ken Fyrstenberg Nilsen, Abidas Software .com /// License: CC-Attribute var ctx = demo.getContext('2d'), font = '64px impact', w = demo.width, h = demo.height, curve, offsetY, bottom, textHeight, angleSteps = 255/h, i = h, y, os = document.createElement('canvas'), octx = os.getContext('2d'); os.width = w; os.height = h; octx.font = font; octx.textBaseline = 'top'; octx.textAlign = 'center'; function renderBridgeText() { curve = parseInt(iCurve.value, 10); offsetY = parseInt(iOffset.value, 10); textHeight
  • HTML5知识整理
    HTML5知识点 (一)初识HTML5(二)HTML5常用的语义化和结构元素(三)HTML5图形绘画标签canvas(四)HTML5矢量图形SVG(五)HTML5媒体播放常用标签(六)HTML5新增input类型(七)HTML5常用的表单属性(八)Web本地储存 (一)初识HTML5 什么是HTML5 HTML5 是HTML的最新版本,它是W3C与WHATWG合作的结果。HTML5继承了原先HTML的部分特征,添加了许多新的语法特征,比如语义特性、本地存储特性、设备兼容特性、连接特性、网页多媒体 特性等。 HTML5与HTML4的区别 HTML4中元素不能把文档结构表示清楚,在HTML5中增加了与结构相关的元素,使得⽂档结构更加清晰,结构更加语义化。 HTML4在Web应⽤程序的功能受到限制,⽐如:不允许同时上传多个⽂件,HTML5提供了web应用程序使⽤的API。 DOCTYPE声明变化:HTML4中需要指明是HTML的哪个版本,HTML5不需要,只需要< !DOCTYPE html>即可。 HTML5优势 实时更新 离线缓存 跨平台 视频和⾳频的支持 (二)HTML5常用的语义化和结构元素 header标签:通常被放置在页⾯或者页⾯中某个区块元素的顶部,用来介绍内容或者当做导航链接 栏,在一个文档中,您可以定义多个< header>元素。nav标签
  • 有没有办法使用CSS3 / Canvas来弯曲/弧形文本(Is there a way to curve / arc text using CSS3 / Canvas)
    问题 我正在尝试使用CSS3,HTML Canvas甚至是SVG来制作弯曲的文本效果(例如,请参见下图)? 这可能吗? 如果是这样,我怎么能达到这种效果? 更新:澄清:以这种方式设置样式的文本将是动态的。 回答1 SVG直接支持路径上的文本,尽管它不会沿路径“弯曲”单个字形。 这是如何创建它的示例: ... <defs> <path id="textPath" d="M10 50 C10 0 90 0 90 50"/> </defs> <text fill="red"> <textPath xlink:href="#textPath">Text on a Path</textPath> </text> ... 回答2 您当然可以在canvas上进行操作,请尝试以下代码作为示例: <!DOCTYPE html> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <title>Testing min-width and max-width</title> <style type="text/css"> </style> </head> <body> <canvas id="cnv"></canvas> <script type="text/javascript" charset="utf-8"> cnv = document
  • 如何拍摄基于HTML5-JavaScript的视频播放器的快照?(How to take a snapshot of HTML5-JavaScript-based video player?)
    问题 实际上,我有一个具有JavaScript功能的HTML5页面,该页面允许我播放wmv视频文件。 视频播放时(有暂停或无暂停)并以任何图像格式JPG或BMP保存时,我需要拍摄快照。 任何帮助将不胜感激。 谢谢你。 <!DOCTYPE HTML> <html> <head> <title>HTML5 video</title> <script type="text/javascript"> function checkPlay() { var myVideo = document.getElementById("myVid"); var ytStr = '<iframe width="500" height="500" src="C:\XA0002.wmv" frameborder="0" allowfullscreen></iframe>'; try { var canPlay = document.getElementsByTagName('video')[0].canPlayType("video/wmv"); if ((canPlay == "no") || (canPlay == "")) { myVideo.innerHTML = ytStr; } new MediaElement(v, { success: function (media) { media.play
  • HTML5 / Canvas是否支持双缓冲?(Does HTML5/Canvas Support Double Buffering?)
    问题 我想做的是在缓冲区上绘制图形,然后将其原样复制到画布上,这样我就可以进行动画处理并避免闪烁。 但是我找不到这个选项。 有人知道我该怎么做吗? 回答1 以下有用的链接除了显示使用双缓冲的示例和优点之外,还显示了使用html5 canvas元素的其他一些性能提示。 它包含指向jsPerf测试的链接,这些链接将跨浏览器的测试结果汇总到Browserscope数据库中。 这样可以确保性能提示得到验证。 http://www.html5rocks.com/zh-CN/tutorials/canvas/performance/ 为了您的方便起见,我提供了本文所述的有效双缓冲的最小示例。 // canvas element in DOM var canvas1 = document.getElementById('canvas1'); var context1 = canvas1.getContext('2d'); // buffer canvas var canvas2 = document.createElement('canvas'); canvas2.width = 150; canvas2.height = 150; var context2 = canvas2.getContext('2d'); // create something on the canvas
  • 【HTML5】->初识HTML->HTML简单介绍&HTML5基本元素讲解
    HTML边缘探索 Ⅰ HTML简介Ⅱ HTML到HTML5----HTML发展历史Ⅲ HTML5简介Ⅳ HTML5环境Ⅴ HTML5基本元素介绍Ⅵ 写一个最简单的HTML程序 Ⅰ HTML简介 超文本标记语言(Hyper Text Markup Language),缩写为HTML,标准通用标记语言下的一个应用。HTML不是一种编程语言,而是一种标记语言 (markup language),是网页制作所必备的工具。“超文本”就是指页面内可以包含图片、链接,甚至音乐、程序等非文字元素。 超文本标记语言(或超文本标签语言)的结构包括“头”部分和“主体”部分,其中“头”部提供关于网页的信息,“主体”部分提供网页的具体内容。 超文本就是指页面内可以包含图片,链接,甚至音乐、程序等非文字元素。 Ⅱ HTML到HTML5----HTML发展历史 超文本标记语言(第一版)——在1993年6月作为互联网工程工作小组(IETF)工作草案发布(并非标准)HTML 2.0——1995年11月作为RFC 1866发布,在RFC 2854于2000年6月发布之后被宣布过时。HTML 3.2——1997年1月14日,W3C推荐标准。HTML 4.0——1997年12月18日,W3C推荐标准。HTML 4.01(微小改进)——1999年12月24日,W3C推荐标准。HTML 5——2014年10月28日
  • 如何使用HTML5水平翻转图像(How to flip images horizontally with HTML5)
    问题 在IE中,我可以使用: <img src="http://example.com/image.png" style="filter:FlipH"> 实现水平翻转图像。 有没有办法在HTML5中水平翻转? (也许通过使用画布?) 谢谢大家:) 回答1 canvas = document.createElement('canvas'); canvasContext = canvas.getContext('2d'); canvasContext.translate(width, 0); canvasContext.scale(-1, 1); this.canvasContext.drawImage(image, 0, 0); 这是一个用于测试的Sprite对象的片段,它产生了您似乎期望的结果。 这是另一个具有更多详细信息的站点。 http://andrew.hedges.name/widgets/dev/ 回答2 您不需要HTML5,可以使用与IE中相同的CSS来完成: -moz-transform: scale(-1, 1); -webkit-transform: scale(-1, 1); -o-transform: scale(-1, 1); transform: scale(-1, 1); filter: FlipH; 回答3 我喜欢上面的Eschers功能。
  • 使用HTML5 / JavaScript生成并保存文件(Using HTML5/JavaScript to generate and save a file)
    问题 我最近一直在摆弄WebGL,并让Collada阅读器工作。 问题是它相当慢(Collada是一种非常冗长的格式),因此我将开始将文件转换为更易于使用的格式(可能是JSON)。 我已经有了用JavaScript解析文件的代码,因此我也可以将其用作导出器! 问题正在保存。 现在,我知道我可以解析文件,将结果发送到服务器,并让浏览器从服务器请求文件下载作为下载。 但是实际上,服务器与此特定过程无关,那么为什么要参与其中呢? 我已经在内存中保存了所需文件的内容。 有什么办法可以使用户使用纯JavaScript进行下载? (我对此表示怀疑,但也可能会问...) 需要明确的是:我不会在用户不知情的情况下尝试访问文件系统! 用户将提供一个文件(可能通过拖放),脚本将转换文件在内存中的位置,并提示用户下载结果。 就浏览器而言,所有这些都应该是“安全”的活动。 [编辑]:我没有提前提到它,所以回答“ Flash”的海报是足够有效的,但是我正在做的部分工作是试图强调使用纯HTML5可以完成的工作...因此Flash是就我而言 (尽管对于任何使用“真实” Web应用程序的人来说,这都是一个非常有效的答案。)在这种情况下,除非我不想让服务器参与其中,否则看起来我很不走运。 不管怎么说,还是要谢谢你! 回答1 好的,创建一个data:URI绝对对我有用
  • Resize HTML5 canvas to fit window(Resize HTML5 canvas to fit window)
    问题 如何自动缩放HTML5 <canvas>元素以适合页面? 例如,我可以通过将height和width属性设置为100%来缩放<div> ,但是<canvas>不能缩放,是吗? 回答1 我相信我已经找到了一个优雅的解决方案: 的JavaScript /* important! for alignment, you should make things * relative to the canvas' current width/height. */ function draw() { var ctx = (a canvas context); ctx.canvas.width = window.innerWidth; ctx.canvas.height = window.innerHeight; //...drawing code... } 的CSS html, body { width: 100%; height: 100%; margin: 0; } 到目前为止,对我没有太大的负面性能影响。 回答2 以下解决方案最适合我。 由于我对编码还比较陌生,因此我希望直观地确认某件事正在按我的预期方式工作。 我在以下站点找到它:http://htmlcheats.com/html/resize-the-html5-canvas-dyamically/ 这是代码: <!DOCTYPE
  • 在html5画布上拖动图像并调整其大小(dragging and resizing an image on html5 canvas)
    问题 我正在构建HTML5画布图像编辑器。 将图像上传到画布后,我需要拖动并在画布上调整其大小。 我设法上传了图片,并使其在画布上可拖动。 但是我需要使它在画布上也可调整大小。 提前致谢。 var Img = new Image(); Img.src = file; Img.onload = function () { context.drawImage(Img, 50, 0, 200, 200); } mouseMove = function (event){ if (down) { context.clearRect(0,0,800,500); context.translate(0, -50); context.drawImage(Img, (event.clientX - offsetX), (event.clientY - offsetY), 200, 200); context.translate(0, 50); } } mouseUp = function () { down = false; } mouseDown = function () { down = true; } canvas.addEventListener('mousedown', mouseDown, false); canvas.addEventListener('mouseup'
  • How can I write text on a HTML5 canvas element?
    Is it possible to write text on HTML5 canvas?
  • 分享996个实用的JavaScript特效你要的全在这里
    链接:https://pan.baidu.com/s/1eL8ASFY7BGiIrVXCtgPzgQ 密码:rbqo 我就不信没有你想要的。996个好看且实用的JavaScript特效,总有一款适合你,小弟在某付费网站上收集的,虽然不是我的原创但是小弟这996个Js也是花了很多时日!下面是JS的名字,我放了一些图片,所有图片全都放进去是不行的996个图太多,大家下载后可以看到。 css3聚光灯射线旋转动画特效 js圆形虚线指针时钟特效 HTML5 Canvas透明气泡动画特效 jedate选择一年范围日期插件 点击卡片全屏打开css3特效 人物遥控无人机CSS3动画 css3 svg仿微信加载框代码 水面上的月亮CSS3动画特效 不规则抽象彩带HTML5动画 Canvas透明丝带飘动特效 js点击弹窗弹出登录框代码 原生js轮播图自动切换代码 css3手机音乐播放器ui布局 CSS3天气预报APP应用UI界面 纯CSS3卡通甜甜圈动画特效 css3 hover悬停图片显示描述代码 HTML5 Canvas星星笑脸动画 HTML5 SVG叶子飘落动画特效 HTML5 Canvas射线能量光圈动画 js时钟带文本标签月份和星期 CSS3电子结算单折叠显示特效 HTML5 Canvas圆点波浪动画 纯CSS3绘制黑色小萌猫特效 CSS3五星红旗国庆节庆祝动画特效 H5