空心文字HTML,HTML5绘制空心的文本

HTML5绘制空心的文本

1、设计源码

HTML5绘制空心的文本

/**

* 绘制空心的文本

function drawHollowText()

{

//找到元素

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

//创建context对象

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

//设置字样和字体大小

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

//绘制空心文本

ctx.strokeText("HTML5",300,300);

}

2、实现结果

3、结果说明

(1)创建一个画布，并设置id、宽度和高度

(2)找到元素

var canvas = document.getElementById("canvas");(3)创建context对象，选择“2d”

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

(4)设置字样和字体大小

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

(5)绘制空心文本，设置文本内容、文本横坐标起始坐标和文本纵坐标起始坐标

ctx.strokeText("HTML5",300,300);

空心文字HTML,HTML5绘制空心的文本相关推荐

html表格框线怎么弄实心的,HTML5绘制实心的文本
HTML5绘制实心的文本 1.设计源码 HTML5绘制实心的文本 function drawSolidText() { var canvas = document.getElementById(&qu ...
html 怎么写出实心园,HTML5绘制实心的文本
HTML5绘制实心的文本 1.设计源码 HTML5绘制实心的文本 function drawSolidText() { var canvas = document.getElementById(&qu ...
27.html-凹凸文字、空心文字、精灵图
凹凸文字(示例): div{ font-size: 120px; background-color: rgb(33,177 ...
WPF自定义空心文字
原文:WPF自定义空心文字首先创建一个自定义控件,继承自FrameworkElement,"Generic.xaml"中可以不添加样式. 要自定义空心文字,要用到绘制格式化文本F ...
[css] CSS画一个三角形，CSS绘制空心三角形
1.不同理解的边框 <div class="border"></div> .border {width: 50px;height: 50px;border: ...
Android Paint 绘制空心渐变圆角矩形
Android Paint 绘制空心渐变圆角矩形在onDraw()中使用Paint绘制空心的圆角矩形代码 @Overrideprotected void onDraw(Canvas canvas) ...
实用技巧--CAD制作空心文字【中级】
实际工作中,cad的空心字一般有以下用途: 一.可以用于标题栏的作者署名(个人的艺术签名): 二.可以用于线切割行业,进行文字切割: 三.一些特别的字体--cad常规字体库没有的,需要描出来的. 怎样 ...
css实现空心文字效果
在日常开发中大家很有可能会遇到需要手动实现空心文字效果实现方式一 (空心字体) <style> .text{-webkit-text-stroke: 1px black; // 根据需求 ...
html空心字体颜色,用-webkit-text-stroke实现空心文字
-wekbit-text-stroke -webkit-text-stroke是一个css属性,定义文字字符描边的宽度和颜色,它是-webkit-text-stroke-width和-webkit-t ...

空心文字HTML,HTML5绘制空心的文本

空心文字HTML,HTML5绘制空心的文本相关推荐

最新文章

热门文章