HTML5 canvas fillText() 方法

实例

使用 fillText()，在画布上写文本 "Hello world!" 和 "w3school.com.cn"：

JavaScript:

var c=document.getElementById("myCanvas");
var ctx=c.getContext("2d");ctx.font="20px Georgia";
ctx.fillText("Hello World!",10,50);ctx.font="30px Verdana";
// 创建渐变
var gradient=ctx.createLinearGradient(0,0,c.width,0);
gradient.addColorStop("0","magenta");
gradient.addColorStop("0.5","blue");
gradient.addColorStop("1.0","red");
// 用渐变填色
ctx.fillStyle=gradient;
ctx.fillText("w3school.com.cn",10,90);

HTML5 canvas fillText() 方法相关推荐

canvas html5字符串,具有从右到左字符串的HTML5 Canvas fillText
您无需为每个单独的字符串设置方向.请参阅以下示例,该示例还显示了正确显示顺序的隐式bidi控制标记的正确使用: Your browser does not support the HTML5 canv ...
HTML5 canvas drawImage() 方法记录
浏览器支持 Internet Explorer 9.Firefox.Opera.Chrome 以及 Safari 支持 drawImage() 方法. 注释:Internet Explorer 8 或 ...
HTML5 canvas clearRect() 方法
浏览器支持 Internet Explorer 9.Firefox.Opera.Chrome 以及 Safari 支持 clearRect() 方法. 注释:Internet Explorer 8 或 ...
html5 canvas 图片拼接,HTML5 canvas drawImage方法实现读取图片数据截图拼接图片。
代码如下: Document *{margin:0 auto;} .box{border: 1px solid #ccc;width:1205px;height:400px;margin:0 auto ...
HTML5 Canvas中 fillText() 和 strokeText() 的区别
前言 Canvas现在越来越多地被运用到我们的项目中了,所以对Canvas的研究也得跟上呀,不然就被时代抛弃了.这次要给大家分享的是 HTML5 Canvas 中的 fillText 和 stroke ...
html5 fill,HTML canvas fillText()用法及代码示例
fillText()方法用于在画布上绘制填充的文本.文本的默认颜色是黑色. 用法: context.fillText(text, x, y, maxWidth); 参数: text:此参数指定要在画布 ...
HTML5 canvas 之 clip
今天学习HTML5 canvas clip() 方法时,发现其几乎都要与save()与restore()方法嵌套使用,不这样效果又达不到期望,故自己做了一下一些尝试,以加深理解. 1. 主要代码及效果 ...
html5显示字母的值,使用HTML5 Canvas API控制字体的显示与渲染的方法
今天我们开始征战一个全新的内容--HTML5 Canvas的文本API!要知道,艺术家通常同时也是一个书法家,所以我们要学习写字,而且是写出漂亮的字.是不是很有意思? 好了,先预告一下Canvas 文 ...
用html制作阴影效果,使用HTML5 Canvas绘制阴影效果的方法
这篇文章主要介绍了使用HTML5 Canvas绘制阴影效果的方法,包括一个3D拉影边缘模糊效果文字的编写例子,在阴影效果的利用上进一步深入,需要的朋友可以参考下创建阴影效果需要操作以下4个属性: ...

HTML5 canvas fillText() 方法

实例

HTML5 canvas fillText() 方法相关推荐

最新文章

热门文章