<!DOCTYPE html>

<html>

<head>

    <meta charset="UTF-8">

    <title>canvas</title>

    <script type="text/javascript" src="../js/jQuery.js"></script>

    <style type="text/css">

        *{

            margin: 0;

            padding: 0;

            outline: none;

            border: none;

        }

        #canvas{

            width: 7rem;

            margin: .25rem 0 0 1.5rem;

            border: 1px solid black;

        }

    </style>

</head>

<body>

    <canvas id="canvas" width="1000" height="600"></canvas>

</body>

</html>

<script type="text/javascript">

    /**

     * rem 布局初始化

     */

    $('html').css('font-size', $(window).width()/10);

    /**

     * 获取 canvas 画布

     * 获取 canvas 绘图上下文环境

     */

    var canvas = $('#canvas')[0];

    var cxt = canvas.getContext('2d');

    /**

     * 创建图片填充样式

     * 一: createPattern( 图片对象, 重复方式 )

     * 二: createPattern( canvas对象, 重复方式)

     * 三: createPattern( 视频对象, 重复方式)

     */

    /*

    var img = new Image();

    img.src = "../img/favicon.ico";

    img.onload = function(){

        var pattern = cxt.createPattern(img, "repeat");

        cxt.fillStyle = pattern;

        cxt.fillRect(0, 0, 1000, 600);

    }

    */

    var fiveStartPath = function(cxt){

        cxt.beginPath();

        var x = 0; y = 0;

        for(var i = 0; i < 5; i++){

            x = Math.cos((18+72*i)/180*Math.PI);

            y = Math.sin((18+72*i)/180*Math.PI);

            cxt.lineTo(x, 0-y);

            x = Math.cos((54+72*i)/180*Math.PI)/2.0;

            y = Math.sin((54+72*i)/180*Math.PI)/2.0;

            cxt.lineTo(x, 0-y);

        }

        cxt.closePath();

    }

    var drawFiveStar = function(cxt, fiveStart){

        cxt.save();

        cxt.translate(fiveStart.offsetX, fiveStart.offsetY);

        cxt.rotate(fiveStart.RotationAngle/180*Math.PI);

        cxt.scale(fiveStart.Radius, fiveStart.Radius);

        fiveStartPath(cxt);

        cxt.fillStyle = "yellow";

        cxt.fill();

        cxt.restore();

    }

    var createCanvas = function(){

        var canvas = document.createElement("canvas");

        canvas.width = 100;

        canvas.height = 100;

        var cxt = canvas.getContext('2d');

        var fiveStart = {

            Radius: 50,

            offsetX: 50,

            offsetY: 50,

            RotationAngle: 0

        }

        drawFiveStar(cxt, fiveStart);

        return canvas;

    }

    var canvasBackground = createCanvas();

    var patten = cxt.createPattern(canvasBackground, "repeat");

    cxt.fillStyle = patten;

    cxt.fillRect(0, 0, 1000, 600);

</script>

HTML5 Canvas ( 图片填充样式 ) fillStyle, createPattern的更多相关文章

  1. HTML5 Canvas 颜色填充学习

    ---恢复内容开始--- 如果我们想要给图形上色,有两个重要的属性可以做到:fillStyle 和 strokeStyle. fillStyle = color strokeStyle = color ...

  2. 导出HTML5 Canvas图片并上传服务器功能

    这篇文章主要介绍了导出HTML5 Canvas图片并上传服务器功能,文中通过实例代码给大家介绍了HTML5 Canvas转化成图片后上传服务器,代码简单易懂非常不错,具有一定的参考借鉴价值,需要的朋友 ...

  3. HTML5 Canvas图片操作简单实例1

    1.加载显示图片 <canvas id="canvasOne" class="myCanvas" width="500" height ...

  4. HTML5 Canvas渐进填充与透明

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

  5. HTML5 Canvas ( 图片绘制 转化为base64 ) drawImage,toDataURL

    <!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title> ...

  6. html5 canvas图片渐变

    <!doctype html> <html> <head> <meta charset="utf-8"> <title> ...

  7. html5 canvas图片翻转

    <!doctype html> <html> <head> <meta charset="utf-8"> <title> ...

  8. html5 canvas图片反色

    <!doctype html> <html> <head> <meta charset="utf-8"> <title> ...

  9. html5 canvas图片马赛克

    <!doctype html> <html> <head> <meta charset="utf-8"> <title> ...

随机推荐

  1. test20181004 排列

    题意 分析 容斥公式的意义 选了原图中\(x(x \geq i)\)条边的方案,重复了\(\binom{x}{i}\)次. 有多加多减,所以就是那个式子. 具体而言,对选了x条原图中的边的方案,总共加 ...

  2. JS替换空格回车换行符

    JS替换空格回车换行符 str=str.replace(/\r/g," ") str=str.replace(/\n/g,"<br />")  或 ...

  3. ZZ ? ?: 回?做??的十年技?生涯（?文，非??慎入）

    元音字母 身份 用户 文章 1409 星座 双子座 积分 14420 等级 灵樨(8) 发信人: fafe (元音字母), 信区: WorkLife 标  题: 回顾做码农的十年技术生涯(长文,非码农 ...

  4. 各JAVA开发框架版本及对应信息

    日期:2017.05.22 当前最新 release 版本情况: 框架 最新GA(General Availability)版本 spring 4.3.8 spring boot 1.5.3 myba ...

  5. Hadoop集群环境搭建步骤说明

    Hadoop集群环境搭建是很多学习hadoop学习者或者是使用者都必然要面对的一个问题,网上关于hadoop集群环境搭建的博文教程也蛮多的.对于玩hadoop的高手来说肯定没有什么问题,甚至可以说事“ ...

  6. Maven 生成项目站点

    Maven 不仅仅时一个自动化构建工具和一个依赖管理工具,他还能够帮助聚合项目信息,促进团队间的交流,POM 可以包含各种项目信息,如项目描述.版本控制系统地址.缺陷跟踪系统地址.许可证信息.开发者信 ...

  7. TS流的解析

    个字节不一定都是有效数据,有一些可能为填充数据). 工作形式: 因为在TS流里可以填入很多种东西,所以有必要有一种机制来确定怎么来标识这些数据.制定TS流标准的机构就规定了一些数据结构来定义.比如: ...

  8. bzoj 2571: Getting Rid of the Holidays

    Description B国的国王Johnny在他在位的短短几年里制定了不少的节日(事实上没超过30个),这些节日是为了尊敬各种各样他所想到的东西而设立的.每过一段固定的时间,一个节日将会被举行(即节 ...

  9. EasyMall 项目记录-环境搭建

    一.搭建项目运行的环境 (1)修改hosts文件 更改:C:\Windows\System32\drivers\etc目录下hosts文件 添加:127.0.0.1        www.easyma ...

  10. Linux修改本地时间

    1.Linux时间调整 1)安装ntp(目的同步时间) yum install ntp 2)修改文件 vi /etc/ntp.conf 添加 server ntp.sjtu.edu.cn perfer ...