<!doctype html>

<html>

<head>

<meta charset="utf-8">

<title>无标题文档</title>

<script>

window.onload = function ()

{

    var oc = document.getElementById('c1');

    var ogc = oc.getContext('2d');

    var ali = document.getElementsByTagName('li');

    for(var i = 0; i < ali.length; i++)

    {

        ali[i].onclick = function ()

        {

            var str = this.innerHTML;

            var h = 180;

            ogc.clearRect(0,0,oc.width,oc.height);

            ogc.font = h + 'px impact';

            ogc.fillStyle = 'red';

            ogc.textBaseline = 'top';

            var w = ogc.measureText(str).width;

            ogc.fillText(str,(oc.width - w)/2,(oc.height - h)/2);

            var oimg = ogc.getImageData((oc.width - w)/2,(oc.height - h)/2,w,h);

            ogc.clearRect(0,0,oc.width,oc.height);

            var arr = randnum(w*h,w*h/10);

            var newimg = ogc.createImageData(w,h)

            for(var i = 0; i <arr.length; i++)

            {

                newimg.data[arr[i]*4] = oimg.data[arr[i]*4];

                newimg.data[arr[i]*4 + 1] = oimg.data[arr[i]*4 + 1];

                newimg.data[arr[i]*4 + 2 ] = oimg.data[arr[i]*4 + 2];

                newimg.data[arr[i]*4 + 3] = oimg.data[arr[i]*4 + 3];

            }

            ogc.putImageData(newimg,(oc.width - w)/2,(oc.height - h)/2);

        }

    }

    function randnum( iall,inow)

    {

        var arr = [];

        var newarr = [];

        for(var i = 0; i < iall; i++)

        {

            arr.push(i);

        }

        for(var i = 0; i< inow; i++)

        {

            newarr.push(arr.splice(Math.floor(Math.random()*arr.length),1));

        }

        return newarr

    }

}

</script>

<style>

body{

    background:pink;

    }

#c1{

    background:white;

    }

</style>

</head>

<body>

<canvas id="c1" width="400" height="400"></canvas>

<ul style="float:left;font-size:30px;">

    <li>新</li>

    <li>年</li>

    <li>快</li>

    <li>乐</li>

</ul>

</body>

</html>

html5 canvas 像素随机百分之十显示的更多相关文章

  1. 如何在HTML5 Canvas 里面显示 Font Awesome 图标

        Font Awesome 是一套完美的图标字体,主要目的是和 Bootstrap 搭配使用. 提供的CSS 已经可以完美显示这些图标在网页里面.最新的版本4.3 里面,已经提供519 Icon ...

  2. HTML5 Canvas中实现绘制一个像素宽的细线

    正统的HTML5 Canvas中如下代码 ctx.lineWidth = 1; ctx.beginPath(); ctx.moveTo(10, 100); ctx.lineTo(300,100); c ...

  3. [js高手之路] html5 canvas系列教程 - 像素操作(反色,黑白,亮度,复古,蒙版,透明)

    接着上文[js高手之路] html5 canvas系列教程 - 状态详解(save与restore),相信大家都应该玩过美颜功能,而我们今天要讲的就是canvas强大的像素处理能力,通过像素处理,实现 ...

  4. HTML5 Canvas 获取网页的像素值。

    我之前在网上看过一个插件叫做出JScolor   颜色拾取器  说白了就是通过1*1PX的DOM设置颜色值通过JS来获取当前鼠标点击位置DOM的颜色值. 自从HTML5 画布出来之后.就有更好的方法来 ...

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

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

  6. HTML5 Canvas 绘制二十四字真言钟表

    代码: <!DOCTYPE html> <html lang="utf-8"> <meta http-equiv="Content-Type ...

  7. 使用 HTML5 canvas 绘制精美的图形

    HTML5 是一个新兴标准,它正在以越来越快的速度替代久经考验的 HTML4.HTML5 是一个 W3C “工作草案” — 意味着它仍然处于开发阶段 — 它包含丰富的元素和属性,它们都支持现行的 HT ...

  8. HTML5 canvas 绘制精美的图形

    HTML5 是一个新兴标准,它正在以越来越快的速度替代久经考验的 HTML4.HTML5 是一个 W3C “工作草案” — 意味着它仍然处于开发阶段 — 它包含丰富的元素和属性,它们都支持现行的 HT ...

  9. 怎样用HTML5 Canvas制作一个简单的游戏

    原文连接: How To Make A Simple HTML5 Canvas Game 自从我制作了一些HTML5游戏(例如Crypt Run)后,我收到了很多建议,要求我写一篇关于怎样利用HTML ...

随机推荐

  1. Mac 切换Windows 使用虚拟机, 不推荐双系统

     为什么使用虚拟机而不是双系统? 1.虚拟机可以随时在两个系统之间进行切换,便于在工作时使用而不影响效率.如果是双系统,在切换到另一个系统时需要关机重启,太过麻烦. 2.虚拟机除了运行Windows之 ...

  2. [HIHO1082]然而沼跃鱼早就看穿了一切（字符串水题）

    题目链接:http://hihocoder.com/problemset/problem/1082 数据范围小,胡搞. /* ━━━━━┒ギリギリ♂ eye! ┓┏┓┏┓┃キリキリ♂ mind! ┛┗ ...

  3. java生成带html样式的word文件

    参考:http://blog.csdn.net/xiexl/article/details/6652230 最近在项目中需要将通过富文本编辑器处理过的文字转换为Word,查了很久,大家通常的解决办法是 ...

  4. Android实现ExpandableTextView可扩展TextView

    介绍 在应用开发中,总会遇到一些类似于公告,说明等长文本的TextView,但是为了排版美观等因素,我们通常是要隐藏后半部的文本,只显示部分文字,然后在尾部会提供用户一个扩展/收缩的按钮,使得文本框可 ...

  5. ORG 07C00H的意思

    简单说来,该指令用来修正该指令以后出现的(变量/标志的)内存地址,也就是说如果有ORG 0x12345h,那么在该指令以后的变量的地址将被修正为0x12345+old_addr.对于DOS中的COM文 ...

  6. HDU 1548 (最基础的BFS了) A strange lift

    这是一维的BFS,而且没有什么变形,应该是最基础的BFS了吧 题意: 有这样一个奇葩的电梯,你在第i层的时候你只能选择上或者下Ki层,也就是你只能从第i层到达i+Ki或者i-Ki层.当然电梯最低只能在 ...

  7. 51nod1476 括号序列的最小代价

    这题应该可以用费用流写吧?不过我想不出贪心来TAT.其实还是单调队列乱搞啊T_T //ÍøÉϵÄÌ°ÐÄËã·¨ºÃÉñ°¡¡£¡£¡£ÎÒÖ»»áÓÃ×îС·ÑÓÃ×î´óÁ÷ÅÜTAT #in ...

  8. linux安全体系

    一.   硬件.软件选型 确认需求,分析可能面临的安全问题 记录各硬件寿命.保证散热.确保性能冗余 使用商业正版.开源的软件,不从互联网安装系统,从源头保证系统安全 购买专业售后支持 服务器配置双电源 ...

  9. SQLServer的最大连接数 超时时间已到 但是尚未从池中获取连接

    很多做架构设计.程序开发.运维.技术管理的朋友可能或多或少有这样的困惑: SQLServer到底支持多少连接数的并发? SQLServer是否可以满足现有的应用吗? 现有的技术架构支持多少连接数的并发 ...

  10. 使用NPOI创建Excel文件

    Public Sub BuildExcel() '写入内容到Excel Dim hssfworkbook As HSSFWorkbook = WriteExcel() Dim destFileName ...