php中网页字体颜色的代码,HTML5画布如何设置字体颜色?（代码示例）

在HTML5画布中我们可以使用fillStyle属性来设置文本的字体颜色，它可以接受一个颜色的代码值，比如#cc0000，也可以接受一个颜色的英文单词，比如red。下面我们就来了解一下，希望对大家有所帮助。【视频教程推荐：HTML教程】

首先我们需要在HTML页面中使用canvas标签创建一个画布，设置其id值为myCanvas。

然后使用JavaScript在画布中绘制文本图形

1、获取到canvas控件var canvas = document.getElementById("myCanvas");// 查找画布元素

2、使用getContext()方法配置绘图的环境，创建绘图对象var ctx = canvas.getContext("2d");

3、通过fillText方法来在canvas里写上文本，参数分别为文本内容，和文本所在的位置。

我们也可以使用font属性来设置一下文本的字体大小和字体类型。ctx .font="20px 微软雅黑";

ctx .fillText('PHP中文网',20,20,200);

效果图：

可以看到现在页面上显示的文本是默认的黑色文字。

3、想要设置文本的字体颜色，就需要使用fillStyle属性，这个属性可以接受一个颜色的代码值，比如#cc0000，也可以接受一个颜色的英文单词，比如red。ctx .fillStyle="red";

完整js代码：

var canvas = document.getElementById("myCanvas");// 查找画布元素

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

ctx .font="20px 微软雅黑";

ctx .fillStyle="red";

ctx .fillText('PHP中文网',20,20,200);

效果图：

以上就是本篇文章的全部内容，希望能对大家的学习有所帮助。更多精彩内容大家可以关注php中文网相关教程栏目！！！

php中网页字体颜色的代码,HTML5画布如何设置字体颜色?（代码示例）相关推荐

HTML5画布如何设置线的样式？
在画布中,默认线的颜色为黑色,宽度为1像素,但我们可以使用相应的方法为线添加不同的样式.下面将从宽度.描边颜色.端点形状三方面详细讲解线样式的设置方法. 1.宽度使用画布中的lineWidth属性可 ...
如何在html网页中加入椭圆按钮,如何在HTML5画布中绘制椭圆形？
您可以尝试运行以下代码在HTML5画布中绘制椭圆形- 示例HTML> //画布 var c = document.getElementById('newCanvas'); var context ...
表盘时针的html代码,html5画布操作的简单学习-简单时钟
html5画布操作的简单学习-简单时针效果图一.什么是 Canvas? HTML5 的 canvas 元素使用 JavaScript 在网页上绘制图像. 画布是一个矩形区域,您可以控制其每一像素. ...
怎样在html中实现图层重叠,javascript – 在HTML5画布中实现图层
我即将在HTML5画布中实现Photoshop般的图层.目前我有两个想法.第一个也许更简单的想法是为每个图层设置一个Canvas元素,如: 这样当你画到一个图层 – 它实际上是去"层&quo ...
html加粗代码样式,css如何设置字体加粗样式？
css可以通过font-weight属性来设置字体加粗.font-weight属性可用于设置文本的粗细,一般设置该属性的值为bold或bolder来加粗字体. css可以通过font-weight属性 ...
html网站手机最小字体大小,html在手机浏览器如何设置字体大小
动态计算好html的font-size之后,我们设置的大小不一定是真实的大小,所以,我们需要在设置完字体大小之后,再去重新获取一下html的font-size,看看实际的这个值(webview受到系统 ...
android设置字体为微软雅黑,css如何设置字体为微软雅黑
css设置字体为微软雅黑的方法:可以利用font-family属性来设置,如[font-family:"微软雅黑"]或[font-family:"Microsoft Ya ...
w10计算机字体怎么设置在哪里设置,win10电脑修改系统默认字体的方法｜win10系统怎么设置字体大小...
win10电脑怎么改变系统字体?修改系统默认字体的方法 win10电脑怎么改变系统字体?系统字体一直都是一尘不变,虽然看起来方方正正比较便于确认,但总有用户想要修改系统默认字体设置,怎么修改系统默认字 ...
在无字体时使用word样式，并设置字体样式
1.引用依赖 <dependency><groupId>org.apache.poi</groupId><artifactId>poi</arti ...

php中网页字体颜色的代码,HTML5画布如何设置字体颜色?（代码示例）

php中网页字体颜色的代码,HTML5画布如何设置字体颜色?（代码示例）相关推荐

最新文章

热门文章