<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

<html xmlns="http://www.w3.org/1999/xhtml">

<head>

<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />

<title>html5 canvas文本处理</title>

<script src="js/modernizr.js"></script>

</head>

<body>

<script type="text/javascript">

window.addEventListener('load',eventWindowLoaded,false);

function eventWindowLoaded(){

    canvasApp();

}

function canvasSupport(){

    return Modernizr.canvas;

}

function eventWindowLoader(){

    canvasApp();

}

function canvasApp(){

    var message="JourneyYao";

    var fillOrStroke ="fill";

    if(!canvasSupport()){

        return;

    }

    var theCanvas = document.getElementById('canvas')

    var context = theCanvas.getContext("2d")

    var formElement = document.getElementById("textbox")

    formElement.addEventListener('keyup',textBoxChanged,false);

    var formElement = document.getElementById("fillorstroke")

    formElement.addEventListener('change',fillOrStrokeChanged,false);

    drawScreen()

    function drawScreen(){

        context.fillStyle = '#ffffaa';

        context.fillRect(0,0,theCanvas.width,theCanvas.height);

        context.strokeStyle = '#000';

        context.strokeRect(5,5,theCanvas.width-10,theCanvas.height-10);

        //字体大小

        context.font="50px serif";

        var metrics = context.measureText(message);

        //字体居中

        var textWidth= metrics.width;

        var xPosition=(theCanvas.width/2)-(textWidth/2);

        var yPosition=(theCanvas.height/2);

        //选择类型

        switch(fillOrStroke){

            case "fill":

                context.fillStyle="#ff0000";

                context.fillText(message,xPosition,yPosition);

                break;

            case "stroke":

                context.strokeStyle="#000000";

                context.strokeText(message,xPosition,yPosition);

                break;

            case "both":

                context.fillStyle="#ff0000";

                context.fillText(message,xPosition,yPosition);

                context.strokeStyle="#000000";

                context.strokeText(message,xPosition,yPosition);

                break;

        }

    }

    function textBoxChanged(e){

         var target = e.target;

         message=target.value;

         drawScreen();

    }

    function fillOrStrokeChanged(e){

         var target = e.target;

         fillOrStroke=target.value;

         drawScreen();

    }

}

</script>

<canvas id="canvas" width="500" height="300">

你的浏览器无法使用canvas

小白童鞋；你的支持是我最大的快乐！！

</canvas>

<form>

Text:<input id="textbox" placeholder="your text" /><br />

Fill Or Stroke:

<select id="fillorstroke">

  <option value="fill">fill</option>

  <option value="stroke">stroke</option>

  <option value="both">both</option>

</select>

</form>

</body>

</html>

html5 canvas在线文本第二步设置（字体边框）等我全部写完，我会写在页面底部的更多相关文章

  1. HTML5 canvas 在线画笔绘图工具（三）

    组装画板(TDrawBuilder) 在这一小节中我们要把工具条和画板组装起来,让他们可以协同进行工作. 画板通过一个命名为TDrawBuilder来进行组装.在详细讲解TDrawBuilder对象之 ...

  2. JavaScript 基于HTML5 canvas 获取文本占用的像素宽度

    基于HTML5 canvas 获取文本占用的像素宽度   by:授客 QQ:1033553122 直接上代码   // 获取单行文本的像素宽度 getTextPixelWith(text, fontS ...

  3. HTML5 canvas 在线画笔绘图工具（一）

    HTML5 canvas 在线画笔绘图工具(一) 功能介绍 这是我用Javascript写的第一个程序,在写的过程中走了很多弯路,所以写完之后想分享出来,给与我一样的初学者做为学习的参考,同时在编写这 ...

  4. HTML5 Canvas绘文本动画（使用CSS自定义字体）

    一.HTML代码: <!DOCTYPE html> <html> <head> <title>Matrix Text - HTML5 Canvas De ...

  5. HTML5 Canvas Text文本居中实例

    1.代码: <canvas width="700" height="300" id="canvasOne" class="c ...

  6. HTML5 canvas 在线画笔绘图工具（二）

    Canvas+Javascript 带图标的工具条制作 TToolbar 工具条是由一个TToolbar对象和两个按钮对象(TImageButton.TColorButton)组成,因为之前我大部分时 ...

  7. HTML5 canvas 在线画笔绘图工具（四）

    HTML5画图命令 图形的绘制是由TDrawHandler与TCommand 协同工作完成. TDrawHandler需要完成以下工作 1.聚集类用于管理绘图的命令 TCommand 2.管理鼠标事件 ...

  8. HTML5 canvas 在线涂鸦

    插件地址 http://bencentra.github.io/jq-signature/ 采用技术 jq-signature.min.js Developed using jQuery 2.1.4. ...

  9. HTML5 canvas绘制文本

    demo.html <!DOCTYPE html> <html lang="zh"> <head> <meta charset=" ...

随机推荐

  1. 阿里云配置ssl证书

    一.申请证书和下载证书(阿里云申请) 二.在nginx服务器上配置ssl证书 1.检查服务器是否安装openssl 2.在nginx conf 文件夹创建 cret 文件,放置证书 [root@web ...

  2. 个人新站 【EXP技术分享博客】 落成~ 全新的技术资源~ 欢迎莅临~

    对的,我筹备了大半年的个站技术网站正式开张了~ EXP技术分享博客: http://exp-blog.com CSDN上面大部分文章已经迁移过去了,以后也会更多地在新站点更新~ 为了庆祝新站开张,近期 ...

  3. WebGL模型拾取——射线法二

    这篇文章是对射线法raycaster的补充,上一篇文章主要讲的是raycaster射线法拾取模型的原理,而这篇文章着重讲使用射线法要注意的地方.首先我们来看下图. 我来解释一下上图中的originTr ...

  4. 关于go v1.11安装后出现不能正常运行测试程序的问题

    本人最近安装go1.11后出现上述问题,没有找到原因,可能之前安装过的旧的版本在windows下环境变量设置出现了问题,修改后仍然无效,后来删除所有安装版本,及go环境变量,重新下载1.10版本进行安 ...

  5. 1092. To Buy or Not to Buy (20)-map

    给出两个字符串,判断第二个字符串中的字符是否都出现在第一个中. 是,则输出Yes,以及多余的字符的个数. 否,则输出No,以及缺失的个数. #include <iostream> #inc ...

  6. JavaScript高级程序设计学习笔记2

    垃圾收集原理: 找出不再使用的变量,然后释放其内存. js中最常用的垃圾收集方法是标记清除,当变量进入环境时,就将变量标记为“进入环境”,当变量离开环境时,将其标记为“离开环境”,最后由垃圾收集器完成 ...

  7. 软件工程课程设计——第一个Spring

    开发会议框架表格: 1.我们团队Reborn针对需求功能进行热烈的讨论会议,从功能的方面分析开发,结合在一起组合为App软件,再另外思考附加的功能性娱乐项目. 2.开发过程中,以表格的形式反思开发过程 ...

  8. C语言编程—自动生成四则运算升级版

    #include<stdio.h> #include<time.h> struct fenshu { int fenzi; int fenmu; }Fenshu[]; int ...

  9. 团队作业五之旅游行业手机APP分析

    深入分析旅游业手机APP——分析员王奕  在接到组长分配的任务的时候,我的内心是激动的.因为自己不擅长编程,所以还是比较喜欢这种“外围”的文字工作.但是,面对数量庞大的旅游业APP,一时间自己真的不知 ...

  10. Elasticsearch学习系列之term和match查询

    lasticsearch查询模式 一种是像传递URL参数一样去传递查询语句,被称为简单查询 GET /library/books/_search //查询index为library,type为book ...