<!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. goss docker-compose 集成使用

    原理很简单,就是使用volume 进行数据共享, 并执行服务器状态校验 docker-compose 文件 version: "3" services: goss: image: ...

  2. socat 广播以及多播

    官方文档有一个关于组播,多播的例子挺不错,记录下 多播客户端以及服务器 注意地址修改为自己的网络 server socat UDP4-RECVFROM:6666,ip-add-membership=2 ...

  3. StreamSets SDC RPC Pipelines说明

    主要目的是进行跨pipeline 数据的通信,而不仅仅是内部pipeline 的通信,之间不同网络进行通信 一个参考图 pipeline 类型 origin destination 部署架构 使用多个 ...

  4. Jenkins系列之Jenkins的安装

    我们在进行自动化测试的时候通常我们都会进行持续集成,可以帮助我们持续集成的工具有很多,我个人比较喜欢用Jenkins. 主要是因为它有如下优点: 开源免费 跨平台,支持所有的平台 web形式的可视化的 ...

  5. 查询语句中 select from where group by having order by 的执行顺序

    查询中用到的关键词主要包含六个,并且他们的顺序依次为 select--from--where--group by--having--order by 其中 select 和 from 是必须的,其他关 ...

  6. tyvj1061Mobile Service

    题目:http://www.joyoi.cn/problem/tyvj-1061 dp.枚举三个人现在的位置. 1.重点:当前必有一人正处在查询点上!于是省掉一维. 2.转移方程枚举上一阶段的 j 和 ...

  7. C#之设计模式之六大原则

    一.单一职责原则 原文链接:http://blog.csdn.net/lovelion/article/details/7536542 单一职责原则是最简单的面向对象设计原则,它用于控制类的粒度大小. ...

  8. WinRAR打包时不包含文件夹本身，只打包文件夹里的文件和目录

    加上-ep1 参数即可. rar u -m3 -s -r -o+ -ep1 -x*.zip client_zmv9.zip ".\client_zmv9\*"

  9. iOS APP网络分析之rvictl（可以捕捉除了Wifi以外的网络类型）

    From: http://danqingdani.blog.163.com/blog/static/18609419520135204934551/ wireshark亲测可用. ********** ...

  10. Windows下永久解决数据库乱码 utf8 转 gbk

    产生乱码原因 因为windows终端的默认字符集是gbk编码,而mysql数据库是utf8的编码,所以会产生乱码问题 解决乱码问题(临时修改) 询当前数据库默认编码: mysql> show v ...