canvas-6font.html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
</head>
<body>
<canvas id="canvas" style="margin:0 auto;border:1px #ddd solid">
The current browser does not support Canvas, can replace the browser a try!
</canvas> <script> window.onload = function(){
var canvas = document.getElementById('canvas'); canvas.width = 1024;
canvas.height = 2800; if(canvas.getContext('2d')){
var context = canvas.getContext('2d'); // fill
context.font = "bold 60px Arial";
context.fillStyle = "#058";
context.fillText("hello cynthia",40,100); // stroke
context.lineWidth = 1;
context.strokeStyle = "red"
context.strokeText("hello cynthia",40,200); // font的第四个参数 控制文字长度
context.lineWidth = 1;
context.strokeStyle = "green"
context.strokeText("hello cynthia",40,300,60); // fill + linearGradient
var linearGrad = context.createLinearGradient(0,0,300,0);
linearGrad.addColorStop(0.0,'red');
linearGrad.addColorStop(0.25,'yellow');
linearGrad.addColorStop(0.5,'green');
linearGrad.addColorStop(0.75,'blue');
linearGrad.addColorStop(1.0,'pink');
context.fillStyle = linearGrad;
context.fillText("hello cynthia",40,400); // fill + image背景
var backgroundImage = new Image();
backgroundImage.src = "img/1.png";
backgroundImage.onload = function(){
var pattern = context.createPattern(backgroundImage,'repeat');
context.fillStyle = pattern;
context.fillText("hello cynthia",40,500);
} // fill + image背景 + 描边
var backgroundImage = new Image();
backgroundImage.src = "img/1.png";
backgroundImage.onload = function(){
var pattern = context.createPattern(backgroundImage,'repeat');
context.fillStyle = pattern;
context.fillText("hello cynthia",40,600);
context.strokeStyle = linearGrad;
context.strokeText("hello cynthia",40,600);
} context.fillStyle="#508"
// font-style 1.1
context.font = "bold 40px sans-serif";
context.fillText("CYNTHIA娆墨旧染",40,700);
// font-style 1.2
context.font = "italic bold 40px sans-serif";
context.fillText("CYNTHIA娆墨旧染",40,800);
// font-style 1.3
context.font = "oblique bold 40px sans-serif";
context.fillText("CYNTHIA娆墨旧染",40,800); context.fillStyle="#485"
// font-variant 1.1
context.font = "small-caps bold 40px sans-serif";
context.fillText("CYNTHIA娆墨旧染",40,900); context.fillStyle="#234"
// font-weight 1.1
context.font = "lighter 40px sans-serif";
context.fillText("CYNTHIA娆墨旧染",40,1000);
// font-weight 1.2
context.font = "normal 40px sans-serif";
context.fillText("CYNTHIA娆墨旧染",40,1100);
// font-weight 1.3
context.font = "bold 40px sans-serif";
context.fillText("CYNTHIA娆墨旧染",40,1200);
// font-weight 1.4
context.font = "boler 40px sans-serif";
context.fillText("CYNTHIA娆墨旧染",40,1300); context.fillStyle="#54b"
// font-size 1.1
context.font = "xx-small 40px sans-serif";
context.fillText("CYNTHIA娆墨旧染",40,1400);
// font-size 1.2
context.font = "x-small 40px sans-serif";
context.fillText("CYNTHIA娆墨旧染",40,1500);
// font-size 1.3
context.font = "small 40px sans-serif";
context.fillText("CYNTHIA娆墨旧染",40,1600);
// font-size 1.4
context.font = "large 40px sans-serif";
context.fillText("CYNTHIA娆墨旧染",40,1700);
// font-size 1.5
context.font = "x-large 40px sans-serif";
context.fillText("CYNTHIA娆墨旧染",40,1800);
// font-size 1.6
context.font = "xx-large 40px sans-serif";
context.fillText("CYNTHIA娆墨旧染",40,1900); // textAlign
context.fillStyle = "red";
context.font = "bold 40px sans-serif";
// 1.1
context.textAlign = "left";
context.fillText("textAlign=left",40,2000)
// 1.2
context.textAlign = "center";
context.fillText("textAlign=center",40,2100)
// 1.3
context.textAlign = "right";
context.fillText("textAlign=right",40,2200) // Baseline
context.fillStyle = "green";
context.font = "bold 40px sans-serif";
// 1.1
context.textBaseline = "top";
context.fillText("textBaseline=top",40,2300)
// 1.2
context.textBaseline = "middle";
context.fillText("textBaseline=middle",40,2400)
// 1.3
context.textBaseline = "bottom";
context.fillText("textBaseline=bottom",40,2500) }else{
alert('当前游览器不支持Canvas，请更换游览器后再试！');
}
} </script>
</body>
<script>
/*文字 context.font = "bold 40px Arial" context.fillText(string,x,y,[maxlen]) context.strokeText(string,x,y,[maxlen]) font 默认值 "20px sans-serif" font-style
normal
italic 斜体
oblique 倾斜字体 font-variant
normal
small-caps 英文小写
font-size
xx-small
x-small
meium
large
x-large
xx-large
font-family
可以用逗号进行字体备选
@font-face
font-weight
lighter
normal
bold
bolder 文本对齐
//水平 以文字开始点的垂直线为基准
context.textAlign = lefe
center
right //垂直 以文字中心的水平线问基准
context.Baseline = top
middle
bottom
alphabetic （为拉丁字母做的基准线）
ideographic （为方块文字做的基准线）
hanging （为印度文做的基准线）
*/
</script>
</html>
canvas-6font.html的更多相关文章
- html5 canvas常用api总结(三)--图像变换API
canvas的图像变换api,可以帮助我们更加方便的绘画出一些酷炫的效果,也可以用来制作动画.接下来将总结一下canvas的变换方法,文末有一个例子来更加深刻的了解和利用这几个api. 1.画布旋转a ...
- 【探索】利用 canvas 实现数据压缩
前言 HTTP 支持 GZip 压缩,可节省不少传输资源.但遗憾的是,只有下载才有,上传并不支持.如果上传也能压缩,那就完美了.特别适合大量文本提交的场合,比如博客园,就是很好的例子. 虽然标准不支持 ...
- 简单入门canvas - 通过刮奖效果来学习
一 .前言 一直在做PC端的前端开发,从互联网到行业软件.最近发现移动端已经成为前端必备技能了,真是不能停止学习.HTML5新增的一些东西,canvas是用的比较多也比较复杂的一个,简单的入门了一下, ...
- 获取Canvas当前坐标系矩阵
前言 在我的另一篇博文 Canvas坐标系转换 中,我们知道了所有的平移缩放旋转操作都会影响到画布坐标系.那在我们对画布进行了一系列操作之后,怎么再知道当前矩阵数据状态呢. 具体代码 首先请看下面的一 ...
- Canvas坐标系转换
默认坐标系与当前坐标系 canvas中的坐标是从左上角开始的,x轴沿着水平方向(按像素)向右延伸,y轴沿垂直方向向下延伸.左上角坐标为x=0,y=0的点称作原点.在默认坐标系中,每一个点的坐标都是直接 ...
- Canvas绘图之平移translate、旋转rotate、缩放scale
画布操作介绍 画布绘图的环境通过translate(),scale(),rotate(), setTransform()和transform()来改变,它们会对画布的变换矩阵产生影响. 函数 方法 描 ...
- 用html5的canvas和JavaScript创建一个绘图程序
本文将引导你使用canvas和JavaScript创建一个简单的绘图程序. 创建canvas元素 首先准备容器Canvas元素,接下来所有的事情都会在JavaScript里面. <canvas ...
- html5标签canvas函数drawImage使用方法
html5中标签canvas,函数drawImage(): 使用drawImage()方法绘制图像.绘图环境提供了该方法的三个不同版本.参数传递三种形式: drawImage(image,x,y):在 ...
- 使用 JavaScript 和 canvas 做精确的像素碰撞检测
原文地址:Pixel accurate collision detection with Javascript and Canvas 译者:nzbin 我正在开发一个需要再次使用碰撞检测的游戏.我通常 ...
- H5项目开发分享——用Canvas合成文字
以前曾用Canvas合成.裁剪.图片等<用H5中的Canvas等技术制作海报>.这次用Canvas来画文字. 下图中"老王考到驾照后"这几个字是画在Canvas上的,与 ...
随机推荐
- uniGUI经验几则
uniGUI经验几则 (2015-11-07 21:42:41) 转载▼ 标签: it 分类: uniGUI 1.uniTimer的妙用 很多时候,都会遇到在一个uniForm或者uniFrame加载 ...
- Android-Java-静态变量与静态方法内存图
描述Dog对象: package android.java.oop10; public class Dog { public static String name; public static int ...
- layui 富文本 图片上传 后端PHP接口
<!DOCTYPE html> <html> <head> <link rel="stylesheet" type="text/ ...
- cad2012卸载/安装失败/如何彻底卸载清除干净cad2012注册表和文件的方法
cad2012提示安装未完成,某些产品无法安装该怎样解决呢?一些朋友在win7或者win10系统下安装cad2012失败提示cad2012安装未完成,某些产品无法安装,也有时候想重新安装cad2012 ...
- ORACLE 日期加减操作
无论是DATE还是timestamp都可以进行加减操作. 可以对当前日期加年.月.日.时.分.秒,操作不同的时间类型,有三种方法: 1 使用内置函数numtodsinterval增加小时,分钟和秒2 ...
- ubuntu解压rar文件
一般通过默认安装的ubuntu是不能解压rar文件的,只有在安装了rar解压工具之后,才可以解压.其实在ubuntu下安装rar解压工具是非常简 单的,只需要两个步骤就可以迅速搞定. ubuntu 下 ...
- Java Web(三) 会话机制，Cookie和Session详解（转载）
https://www.cnblogs.com/whgk/p/6422391.html 很大一部分应该知道什么是会话机制,也能说的出几句,我也大概了解一点,但是学了之后几天不用,立马忘的一干二净,原因 ...
- java调用高德地图api实现通过ip定位访问者的城市
所需东西:高德地图的key 注意:这个key是 web服务的key 和js的key不是一个key(若没有则自行创建,创建教程在文末) 高德地图的api文档:https://lbs.amap.com/ ...
- 聊聊我面试过的一个最奇葩的 Java 程序猿！
上周我聊了聊最让我反感的 10 种程序猿,无奈一个小时就进行了删除,详细原因就不说了,容易招黑. 今天聊的我面试过的最奇葩的一个程序猿,绝对是奇葩中的奇葩,简直是程序猿中的另类,最让我反感的程序猿又添 ...
- 欧拉函数（C语言实现）
欧拉函数(Euler's totient function)是指小于n的正整数中与n互质的数的数目,用φ(n)表示.特别的,φ(1)=1: 例如:φ(10)=4:1 3 7 9与10互质. 公式:φ( ...