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上的,与 ...
随机推荐
- Mac Terminal open app with a file opened
open -a /Applications/Sublime Text.app test.cpp
- DRF 商城项目 - 日志处理
logging 模块 logging 模块是最基本的日志处理模块 缺陷 但是拥有一些很致命的缺陷 要求用户主动查询, 需要登录到服务器才可以查看日志文件 自带的报错外部通知也没办法判断同类取舍, 短 ...
- 项目Alpha冲刺（团队5/10）
项目Alpha冲刺(团队5/10) 团队名称: 云打印 作业要求: 项目Alpha冲刺(团队) 作业目标: 完成项目Alpha版本 团队队员 队员学号 队员姓名 个人博客地址 备注 221600412 ...
- js截取字符串方法整理slice(), substr(), substring(), split()
substr(start,length) stringObject.substr(start,length) //start,截取起始下标,-1 指字符串最后一个字符,-2 指倒数第二个字符开始 ...
- cad2012卸载/安装失败/如何彻底卸载清除干净cad2012注册表和文件的方法
cad2012提示安装未完成,某些产品无法安装该怎样解决呢?一些朋友在win7或者win10系统下安装cad2012失败提示cad2012安装未完成,某些产品无法安装,也有时候想重新安装cad2012 ...
- 利用Burp Suite攻击Web应用
i春秋作家:Passerby2 web应用测试综述: Web应用漏洞给企业信息系统造成了很大的风险.许多web应用程序漏洞是由于web应用程序缺乏对输入的过滤.简而言之Web应用程序利用来自用户的某种 ...
- 关于elasticsearch function_score的使用
最近做新闻推荐系统,新闻搜索采用的是elasticsearch引擎,为了使推荐更接近用户偏好,搜索时使用了function_score功能对文档进行了重新打分,改变排序规则.以下介绍关于functio ...
- Docker优势
设计,开发 ---> 测试 ----> 部署,运行 代码+运行环境 ---> 镜像 image 环境一致,资源占用少 自动化平台 Docker image的制作很重要
- 视频下载四大神器—如何下载优酷/爱奇艺/腾讯/B站超清无水印视频
视频下载四大神器—如何下载优酷/爱奇艺/腾讯/B站超清无水印视频 2018-07-11 | 标签»下载, 下载工具, 视频 又是视频下载,老生常谈的话题.阿刚同学已在乐软博客多次与大家分享推荐 ...
- python库函数Map, Filter and Reduce的用法
python中有三个函数式编程极大的简化了程序的复杂性,这里就做一下讨论和记录. 一 Map:应用在链表输入所有元素的函数,它的格式如下所示: map(function_to_apply, list_ ...