总结一下,canvas 画布 文字描边的2种方法以及其不同的视觉效果:

效果图:

具体代码:

<canvas id="canvas" width="800" height="440" style="background:black;"></canvas>
<script>
var c = document.getElementById("canvas"),
ctx = c.getContext("2d"); //先设置文字字体和大小
ctx.font = "4.2rem Open Sans,Microsoft YaHei";
//设置画笔(绘制线条)操作的线条宽度,非必须;如果不写这句,那就是默认1
ctx.lineWidth = 3;
//实线文字
ctx.fillStyle = "green";
ctx.fillText("实线(实心)文字:fill",10,100); //空心文字
ctx.strokeStyle = "red";
ctx.strokeText("空心文字:stroke",10,200); //描边文字:实线与空心文字合起来就是描边啦!先写空心的和先写实心的视觉效果不同:
//1.空心+实心
ctx.strokeStyle = "red";
ctx.strokeText("描边:stroke+fill",10,300);
ctx.fillStyle = "green";
ctx.fillText("描边:stroke+fill",10,300); //2.实心+空心
ctx.fillStyle = "green";
ctx.fillText("描边:fill+stroke",10,400);
ctx.strokeStyle = "red";
ctx.strokeText("描边:fill+stroke",10,400); //2种描边效果的区分:简要来说就是:实心与空心谁后写,谁的效果更大! </script>

canvas 画布 文字描边的更多相关文章

  1. js将文字填充与canvas画布再转为图片

    需求:封装consul服务的webUI: 原因:展示consul的服务信息时,需要嵌套动画,由于其没有内置的icon,所以将服务name放于图片位: 分析:展示信息时采用了卡片式的服务布局,缩放式的服 ...

  2. html 5 canvas画布整理

    1. 创建canvas画布<canvas id="myCanvas" width="800" height="800" >< ...

  3. [技术博客]海报图片生成——小程序canvas画布

    目录 背景介绍 canvas简介 代码实现 难点讲解 圆角矩形裁剪失败之PS的妙用 编码不要过硬 对过长的文字进行截取 真机首次生成时字体不对 drawImage只能使用本地图片 背景介绍 目标:利用 ...

  4. Android TextView文字描边的实现!!

    Android开发:文字描边 转自:http://www.oschina.net/code/snippet_586849_37287 1. [代码][Java]代码 1 2 3 4 5 6 7 8 9 ...

  5. HTML5 Canvas 填充与描边(Fill And Stroke)

    HTML5 Canvas 填充与描边(Fill And Stroke) 演示HTML5 Canvas Fill 与Stroke文字效果,基于Canvas如何实 现纹理填充与描边. 一:颜色填充与描边 ...

  6. TextView文字描边实现

    TextView文字描边实现 需求描述 文字显示在图片的上面,图片的内容是不确定了,为了防止文字与图片的颜色相近导致用户看不到或者看不清文字的问题,所以显示文字描边,避免问题. 实现 实现思想 使用T ...

  7. 微信小程序--canvas画布实现图片的编辑

    技术:微信小程序   概述 上传图片,编辑图片大小,添加文字,改变文字颜色等 详细 代码下载:http://www.demodashi.com/demo/14789.html 概述 微信小程序--ca ...

  8. 弹幕制作canvas方法,文字直播和聊天

    今天要做体育文字直播的项目,类似这样: 文字不断循环显示,我这里找到了一个网上的写法,分析后并贴在这里,并且封装成了jquery barrager方法,很是方便,分析了下原理,是刷新canvas 画布 ...

  9. 小程序开发-Canvas画布组件

    Canvas画布 基本使用方法: 在wxml中添加canvas组件 <canvas canvas-id='canvasDemo' class='demo'></canvas> ...

随机推荐

  1. Ubuntu安装dlib后import出现libstdc++.so.6: version `GLIBCXX_3.4.21' not found

    1 问题描述 先安装依赖包cmake,libboost,再安装dlib sudo apt-get install cmake sudo apt-get install libboost-python- ...

  2. Eclipase .自动提示

    打开eclipse→Windows→Preferences→Java→Editor→Content Assist 修改Auto Activation triggers for java的值为 .abc ...

  3. CentOS6.5安装Qt4.8.6+QtCreator2.6.1

    工作中需要用到Qt在Linux下做开发,公司提供的电脑安装的CentOS6.2,但是为了和windows下自己使用的QT版本一直,于是也选择安装了Qt5.1.0.但是在CentOS下刚开始是无法启动, ...

  4. imx6q android 添加开机启动脚本

    1.在xx/out/target/product/sabresd_6dq/root/init.rc中添加以下内容 ========================================== ...

  5. Linux学习笔记之Linux启动引导过程

    早期时,启动一台计算机意味着要给计算机喂一条包含引导程序的纸带,或者手工使用前端面板地址/数据/控制开关来加载引导程序.尽管目前的计算机已经装备了很多工具来简化引导过程,但是这一切并没有对整个过程进行 ...

  6. 照着官网来安装openstack pike之neutron安装

    neutron组件安装分为控制节点和计算节点,还是先从控制节点安装 1.前提条件,数据库为nova创建库和账户密码来连接数据库 # mysql -u root -p MariaDB [(none)]& ...

  7. 20145216史婧瑶《Java程序设计》第四次实验报告

    实验四 Android环境搭建 实验内容 搭建Android环境 运行Android 修改代码,能输出学号 实验步骤 1.搭建Android环境 2.安装Android,核心是配置JDK.SDK 3. ...

  8. 单调队列:temperature

    题目大意:某国进行了连续n天的温度测量,测量存在误差,测量结果是第i天温度在[l_i,r_i]范围内. 求最长的连续的一段,满足该段内可能温度不降. 第一行n下面n行,每行l_i,r_i 1<= ...

  9. shell编程学习笔记之sed编辑器

    在shell编程中,大多数处理的都是文本文件.对文本文件进行处理除了使用交互式文本编辑器(vi[m],gedit......)也可以使用另外一类:流编辑器. 流编辑器:使用预定义的编辑规则来对文本进行 ...

  10. linux中__weak关键字的作用

    答:1.可以重新定义同名函数或变量而编译时不报错