本文的应用对Canvas文本设置相关属性进行了汇总，具体使用说明请参考下面代码：

<!DOCTYPE html>

<html lang="zh">

<head>

    <meta charset="UTF-8">

    <title>文本设置</title>

    <style>

        #canvas { border: 1px solid #aaaaaa; display: block; margin: 50px auto; }

    </style>

</head>

<body>

<div id="canvas-warp">

    <canvas id="canvas">

        你的浏览器居然不支持Canvas？！赶快换一个吧！！

    </canvas>

</div>

<script>

    window.onload = function(){

        var canvas = document.getElementById("canvas");

        canvas.width = 600;

        canvas.height = 300;

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

        //绘制背景画布

        context.fillStyle = "#ccc";

        context.fillRect(0,0,600,300);

        context.font = "italic bolder 60px serif"; //设置字体

        //context.fillStyle = "green"; //字体颜色。

        //设置渐变色

        var grd = context.createLinearGradient(360,150,540,150);

        grd.addColorStop(0,"green");

        grd.addColorStop(0.8,"red");

        context.fillStyle = grd;

        context.textAlign = "center"; //文本的中心被放置在指定的位置。

        context.textBaseline="middle"; //文本基线是 em 方框的正中。

        context.shadowColor = "yellow"; //阴影颜色

        context.shadowOffsetX = -50; //阴影x轴位移。正值向右，负值向左。

        context.shadowOffsetY = -50; //阴影y轴位移。正值向下，负值向上。

        context.shadowBlur= 5; //阴影模糊滤镜。数据越大，扩散程度越大。

        context.globalAlpha = 0.5; //透明度

        context.fillText("canvas文本设置",300,150); //显示填充文本

        context.strokeText("canvas文本设置",300,150); //显示描边文本

    };

</script>

</body>

</html>

展示效果如下图所示：

学习资料：

1、https://developer.mozilla.org/zh-CN/docs/Web/API/Canvas_API

2、http://caibaojian.com/canvas/

Canvas文本设置的更多相关文章

  1. canvas文本自动换行

    在用canvas中写刮奖结果的时候发现canvas中的文本不会自动折行,要进行截断另起一行来写.在此参考文章html5-canvas的绘制文本自动换行来做改写. 根据canvas宽度来做折行 在此根据 ...

  2. html5 canvas文本处理

    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/ ...

  3. 【代码笔记】iOS-获得富文本设置以后的文字高度

    一,效果图. 二,工程图. 三,代码. RootViewController.h #import <UIKit/UIKit.h> @interface RootViewController ...

  4. g2蚂蚁数据可视化折线图，点位坐标label 图形文本设置

    应用g2可视化插件画了个粉丝分析图 要求显示如图所见的节点参数,查看文档蚂蚁图形文本设置,得知需要引入如下代码: chart.point().position('update*praises').la ...

  5. CSS之背景设置、字体设置、文本设置

    <html> <head> <meta charset="utf-8"> <title>单行文本框与多行文本框</title& ...

  6. 如何给HTML标签中的文本设置修饰线

    text-decoration属性介绍 text-decoration属性是用来设置文本修饰线呢,text-decoration属性一共有4个值. text-decoration属性值说明表 值 作用 ...

  7. CSS-基本语法/引用/文本设置/选择器/css3属性

    CSS-基本语法/引用/文本设置 css基本语法及页面引用 css基本语法 css的定义方法是: 选择器 { 属性:值; 属性:值; 属性:值;} 选择器是将样式和页面元素关联起来的名称,属性是希望设 ...

  8. CSS-07-CSS文本设置

    <!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title> ...

  9. HTML5 canvas文本属性与方法

    文本属性和方法 font                        设置或返回文本内容的当前字体属性 textAlign                设置或返回文本内容的当前对齐方式 start ...

随机推荐

  1. day39-Spring 14-Spring的JDBC模板：DBCP连接池配置

    一般常用的连接池是DBCP和C3P0. package cn.itcast.spring3.demo1; import java.sql.DriverManager; import org.junit ...

  2. IIS 设置 FTP 服务器 添加多个账户

    我们有很多童鞋经常开不动IIS自带的FTP如何创建,就算创建了也不会实现多用户,下面我来分享一下我的经验吧: 使用 IIS 设置 FTP 服务器 依次单击“开始”按钮.“控制面板”和“添加或删除程序” ...

  3. Spring_MVC

    SpringMVC处理流程 分析: M-Model 模型(完成业务逻辑:有javaBean构成,service+dao+entity) V-View 视图(做界面的展示  jsp,html……) C- ...

  4. UVA_694:The Collatz Sequence

    Language: C++ 4.8.2 #include<stdio.h> int main(void) { long long int m, n, copy_m; ; ; ) { sca ...

  5. kubernetes1.3：操作Docker

    Kubernetes对Docker的管理是通过一个第三方组件实现的.在Kubernetes1.2中这个第三方组件就是go-dockerclient,这是一个GO语言写的docker客户端,支持Dock ...

  6. 三角形数且是完全平方数 2017 ACM-ICPC 亚洲区（乌鲁木齐赛区）网络赛 E.Half-consecutive Numbers

    三角形数:an=n*(n+1)/2; 完全平方数:bn=c^2; 既是三角形数又是完全平方数:An=6*A(n-1)-A(n-2)+2; A[23]={ 0, 1, 8, 49, 288, 1681, ...

  7. UVALive - 4787 ICPC WF 2010 Tracking Bio-bots【dp】

    UVa 4787 WF题果然不一样,本来想暴力搜索,数据太大了,数组都开不了.看题解也不太懂,记录一下书上的题解,以后再看: 此题是给出N*M的格子,有些地方是墙,不可走.求所有不能只通过向上或者向右 ...

  8. jenkins集成错误 标签： 发布 2016-01-10 20:45 747人阅读 评论(21) 收藏

    进入ITOO的项目以后,终于要将自己负责的模块在jenkins上面集成发布了.首先自己按照文档要求一步一步的将配置完成,然后构建,不错所料出错了,经过修改,终于构建成功!构建成功以后就没再管了,结果第 ...

  9. vue element 给指数的div加loading

     const loading = this.$loading({       lock: true,       text: 'Loading',       spinner: 'el-icon-lo ...

  10. 解析P2P金融的业务安全

    看了很多乙方同学们写的业务安全,总结下来,其出发点主要是在技术层面风险问题.另外捎带一些业务风险.今天我要谈的是甲方眼里的业务安全问题,甲方和乙方在业务安全的视野上会有一些区别和一些重合.在同一个问题 ...