<!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. emplace_back减少内存拷贝和移动

    --------<深入应用C++11:代码优化与工程级应用>第2章使用C++11改进程序性能,本章将分别介绍右值引用相关的新特性.本节为大家介绍emplace_back减少内存拷贝和移动. ...

  2. linux系统下怎么安装.deb文件

    linux系统下怎么安装.deb文件? deb 是 ubuntu .debian 的格式.rpm 是 redhat .fedora .suse 的格式. 他们不通用(虽然可以转换一下). deb是de ...

  3. plsql programming 18 包

    所谓包, 就是把一组PL/SQL 的代码元素组织在一个命名空间下. 另外, 包的用法就类似java中的类.( 有封装, 有重载, 没有继承和多肽) create or replace procedur ...

  4. VS2008下使用 CMFCPropertyGridCtrl 转载

    http://blog.csdn.net/sunnyloves/article/details/5655575 在DLG中的基本应用 . 首先在Cxxdlg.h文件中加入 public: CMFCPr ...

  5. EditText控件实现只读

      android的EditText控件实现只读只需设置三个方法: editText.setCursorVisible(false);//隐藏光标 editText.setFocusable(fals ...

  6. C#处理文件流的转换

    //----引入必要的命名空间 using System.IO; using System.Drawing.Imaging; //----代码部分----// private byte[] photo ...

  7. Less tips:声明变量之前可以引用变量!

    Less中的variable可以在使用之后才被声明,这一特性对于希望覆盖前期声明的(比如bootstrap等第三方library的variable)变量,从而优雅地 使用你希望的效果提供了便利. 比如 ...

  8. LA 3644 X-Plosives

    最简单的并查集 多做做水题,加深一下理解 //#define LOCAL #include <cstdio> + ; int parent[maxn]; int GetParent(int ...

  9. HDU 5265 pog loves szh II (技巧)

    题意:给一个数字序列,要求再其中找到两个数,其和再模p的结果是最大的,求此和. 思路:先将输入的元素模p,排序.结果可能有两种情况: (1)a+b大于p:肯定由两个最大的数之和来产生. (2)a+b小 ...

  10. Android下实现tab页个人比较推崇的方法

    使用fragment实现tab页的效果: 三个页面是单独的三个Fragment 主Activity的实现: package com.hsx.tab; import android.os.Bundle; ...