<!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. （2）bytes类型

    bytes类型就是字节类型 把8个二进制一组称为一个byte,用16进制来表示 Python2里面字符串其实更应该称为字节串,但是python2里面有一个类型是butes,所以在Python2里面by ...

  2. java8 array、list操作 汇【3】）（-Java8新特性之Collectors 详解

    //编写一个定制的收集器 public static class MultisetCollector<T> implements Collector<T, Multiset<T ...

  3. Jersey RESTful Web服务

    Jersey是一个RESTFUL请求服务JAVA框架,与常规的JAVA编程使用的struts框架类似,它主要用于处理业务逻辑层.与Struts类似,它同样可以和hibernate,spring框架整合 ...

  4. webpack的3个路径配置项: assetsRoot、assetsSubDirectory、assetsPublicPath

    在 vue-cli 构建模版的配置文件config.js中有assetsRoot,assetsSubDirectory和assetsPublicPath这三个路径配置项 assetsRoot:构建输出 ...

  5. package.json 文件中的版本号

    版本号,格式:"主要版本,次要版本,补丁版本" 指定版本:比如1.2.2,遵循"主版本,次要版本,补丁版本"的格式规定,安装时只安装指定版本. 波浪号(tild ...

  6. mysql 存储过程知识点

    一.创建存储过程 create procedure sp_name() begin ......... end 二.调用存储过程 1.基本语法:call sp_name(): 注意:存储过程名称后面必 ...

  7. bzoj 3572 [Hnoi2014]世界树——虚树

    题目:https://www.lydsy.com/JudgeOnline/problem.php?id=3572 关于虚树:https://www.cnblogs.com/zzqsblog/p/556 ...

  8. yum下载文件的存放位置

    yum下载文件的存放位置    默认是: /var/cache/yum 也可以在 /etc/yum.conf 指定 cachedir=/var/cache/yum #存放目录keepcache=1 # ...

  9. IO测试工具之fio详解(转)

    http://www.cnblogs.com/raykuan/p/6914748.html 目前主流的第三方IO测试工具有fio.iometer和Orion,这三种工具各有千秋. fio在Linux系 ...

  10. Log4j2的基本使用

    Log4j2是Log4j1.x的的升级版,其中也有很大的不同,最大的区别就是由以前的properties配置文件改为xml/json/yaml配置文件. 其中配置文件的位置官方说明如下: Log4j ...