<!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>用图案填充形状</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 canvasApp(){

    if(!canvasSupport()){

        return;

    }else{

        var theCanvas = document.getElementById('canvas')

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

    }

    drawScreen();

    function drawScreen(){

        var fillImg=new Image();

        fillImg.src='fill_20x20.png';

        fillImg.onload=function(){

         //简单的onload
          //图片填充的4种类型：repeat,no-repeat,repeat-x,repeat-y;
          //createPattern()填充图像函数，一个图像的实例，一个填充的类型
 

            var fillPattern = context.createPattern(fillImg,'repeat-x');

            var fillPattern1 = context.createPattern(fillImg,'repeat-y');

            var fillPattern2 = context.createPattern(fillImg,'repeat');

            context.fillStyle=fillPattern;

            context.fillRect(0,0,100,20);

            context.fillStyle=fillPattern1;

            context.fillRect(0,10,100,20);

            context.fillStyle=fillPattern2;

            context.fillRect(0,60,100,10);

            }

     }

}

</script>

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

你的浏览器无法使用canvas

如有疑问加QQ：1035417613;小白童鞋；你的支持是我最大的快乐！！

</canvas>

</body>

</html>
注意图片的路径！！！其他就和css的background感觉差不多

//图片填充的4种类型：repeat,no-repeat,repeat-x,repeat-y;
//createPattern()填充图像函数，一个图像的实例，一个填充的类型

html5 canvas用图案填充形状的更多相关文章

  1. html5 canvas 多个填充渐变形状

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

  2. HTML5 Canvas渐进填充与透明

    详细解释HTML5 Canvas中渐进填充的参数设置与使用,Canvas中透明度的设置与使 用,结合渐进填充与透明度支持,实现图像的Mask效果. 一:渐进填充(Gradient Fill) Canv ...

  3. HTML5<canvas>标签:使用canvas元素在网页上绘制渐变和图像(2)

    详细解释HTML5 Canvas中渐进填充的参数设置与使用,Canvas中透明度的设置与使用,结合渐进填充与透明度支持,实现图像的Mask效果. 一:渐进填充(Gradient Fill) Canva ...

  4. HTML5 Canvas 高仿逼真 3D 布料图案效果

    HTML5 规范引进了很多新特性,其中最令人期待的之一就是 Canvas 元素,HTML5 Canvas 提供了通过 JavaScript 绘制图形的方法,非常强大.下面给大家分享一个 HTML5 C ...

  5. HTML5 Canvas 填充与描边(Fill And Stroke)

    HTML5 Canvas 填充与描边(Fill And Stroke) 演示HTML5 Canvas Fill 与Stroke文字效果,基于Canvas如何实 现纹理填充与描边. 一:颜色填充与描边 ...

  6. [HTML5] Canvas绘制简单形状

    使用canvas来进行绘画,它像很多其他dom对象一样,有很多属性和方法,操作这些方法,实现绘画 获取canvas对象,调用document.getElementById()方法 调用canvas对象 ...

  7. HTML5 程序设计 - 使用HTML5 Canvas API

    请你跟着本篇示例代码实现每个示例,30分钟后,你会高喊:“HTML5 Canvas?!在哥面前,那都不是事儿!” 呵呵.不要被滚动条吓到,很多都是代码和图片.我没有分开写,不过上面给大家提供了目录,方 ...

  8. HTML5 Canvas | w3cschool菜鸟教程

    HTML5 Canvas <canvas> 标签定义图形,比如图表和其他图像,您必须使用脚本来绘制图形.. 在画布上(Canvas)画一个红色矩形,梯度矩形,彩色矩形,和一些彩色的文字. ...

  9. HTML5 新元素、HTML5 Canvas

    HTML5 新元素 自1999年以后HTML 4.01 已经改变了很多,今天,在HTML 4.01中的几个已经被废弃,这些元素在HTML5中已经被删除或重新定义. 为了更好地处理今天的互联网应用,HT ...

随机推荐

  1. OpenGL(3)-三角形

    写在前面 从这节开始,会接触到很多基本概念,原书我也是读了很多遍,一遍一遍去理解其中的意思,以及他们之间的关系. 概念 顶点数组对象:VAO 顶点缓冲对象:VBO 索引缓冲对象:EBO|IBO Ope ...

  2. 172. Remove Element【LintCode by java】

    Description Given an array and a value, remove all occurrences of that value in place and return the ...

  3. redis在php中常用的语法（转）

    String 类型操作 string是redis最基本的类型,而且string类型是二进制安全的.意思是redis的string可以包含任何数据.比如jpg图片或者序列化的对象 $redis-> ...

  4. Java内存区域的划分和异常

    Java内存区域的划分和异常   运行时数据区域 JVM在运行Java程序时候会将内存划分为若干个不同的数据区域. 打开百度App,看更多美图 程序计数器 线程私有.可看作是当前线程所执行的字节码的行 ...

  5. 详细解析 nginx uri 如何匹配 location 规则

    location 是 nginx 配置中出现最频繁的配置项,一个 uri 是如何与多个 location 进行匹配的? 在有多个 location 都匹配的情况下,如何决定使用哪一个 location ...

  6. JAVA笔试准备

    建立时间:2019.4.19 修改时间: 腾讯:选择题(30个,一小时内),简答(2道)和编程题(2道) 涉及内容:(也有可能全是算法)C++,JAVA,数据结构,网络,Linux,计算题 1. 磁盘 ...

  7. 扩展webservice

    描述: 最近一个winform项目刚开发完成.采用c/s架构.闲来把一些技术点整理下了. 做项目之前调研了客户的电脑 .客户端机子性能一般,而且都是基于xp. 这些客观存在的问题,注定了实现过程中必须 ...

  8. 在centOS中安装mongodb

    自己在一个CentOS6.6的系统中按照官网的说明,走了一遍的安装过程,记录一下. 看过个mongo的视频,上面介绍的安装是用源码安装,而官网上说需要gcc4.8.3的版本,还有scons的编译工具, ...

  9. Sprint第二个计划

    一.现状 现在是冲刺的第二个阶段了,我们的进度还是一样,没有太大的进展.所以这一个阶段应该加紧进度,好好学习别的组,弥补我们组的不足.一开始我们是打算用原来的初级APP,然后再补充一些新的内容.可是现 ...

  10. Daily Scrum - 11/16

    时间:午饭 今天小组例会主要是汇报了各自的进度.任烁那边主要为工程添加了单词的类(包含各个参数等成员变量),方便以后实现算法:拜重阳实现了一个简易的“点进-点出”UI,可谓迈出了艰难的第一步:章玮和罗 ...