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上的,与 ...
随机推荐
- Alpha阶段项目复审（冲鸭队）
Alpha阶段项目复审(冲鸭队) 组名 优点 缺点 排名 天冷记得穿秋裤队 支持文件离线开源下载,没有限速 部分功能未实现 1 中午吃啥队 点餐系统用户需求较高,系统功能完善 界面可以再完善一下些 2 ...
- sql-向已有数据的表添加约束
语法: alter table 表名 with nocheck add constraint 约束名 约束类型 具体的约束说明 对表中现有的数据不做检查, 只对添加约束后再录入的数据进行检查. 例子: ...
- 杂七杂八的JavaScript
一.input 焦点定位 1.定位input:(this.$refs.searchInput as HTMLInputElement).focus(); 2.定位search,根据css选择器: ...
- Android NDK学习（六）： so文件兼容之abiFilters的使用
最近项目中遇到了要使用opencv的情况,涉及到了abi兼容的选择.因为如果全部都适配的话,包很大,这样兼容那些用户数极少的cpu就很不划算,所以我只适配了armeabi-v7a这一个.但是今天在x6 ...
- spring boot -thymeleaf-遍历list和map
遍历 list如下 th:each th:each 状态变量 var 遍历map如下(需要双层遍历) controller代码如下
- linux上java解加密(AES/CBC)异常：java.lang.SecurityException: JCE cannot authenticate the provider BC办法
用mapreduce做数据清洗的时候,需要对数据进行解密,加密方法是:AES/CBC/PKCS7Padding,由于java本身不支持,需要添加依赖,用的依赖是: <dependency> ...
- yarn依赖管理工具，和fis3构建工具 gulp详细用法
看视频所了解到的,正在进行摸索. 参考:https://www.cnblogs.com/2050/p/4198792.html这篇介绍gulp的文章非常棒,唯一有一点,页面随时刷新的目前还没实现,不知 ...
- 取消vim打开文件全是黄色方法
如下图: 取消方法: 按下esc键 :nohl 回车
- cmd窗口使用sftp命令非密钥和密钥登录SFTP服务器的两种方式
cmd窗口使用sftp命令非密钥和密钥登录SFTP服务器的两种方式 一.在Windows环境下搭建SFTP服务器可参见http://www.cnblogs.com/Kevin00/p/6341295. ...
- mysql 开发进阶篇系列 40 mysql日志之二进制日志下以及查询日志
一.binlog 二进制其它选项 在二进制日志记录了数据的变化过程,对于数据的完整性和安全性起着非常重要作用.在mysql中还提供了一些其它参数选项,来进行更小粒度的管理. 1.1 binlog-do ...