<!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. 【正则表达式】java应用正则表达式

    一:简单应用 /** * * ' * & * ' * & * & * ' * ' * ' * sources=sdcg'hde&xyz'dfa&&ad' ...

  2. Servlet基本操作

    一.Servlet的请求流程 web项目中的web.xml文件配置为: <servlet> <!--别名--> <servlet-name>Hello</se ...

  3. nodejs 使用express开发获取其他网站引用本站点js文件的参数

    nodejs进行站点的开发其性能是很好的,在js 大行其道的天下,使用js基本上可以干好多只要我们能想到的东西,我们可以使用js文件进行用户验证等等. 这次我们就使用express 进行获取其他站点引 ...

  4. NOSQL之MONGODB

    MongoDB 基于分布式文件存储的数据库.由 C++ 语言编写.旨在为 WEB 应用提供可扩展的高性能数据存储解决方案,它是一个介于关系数据库和非关系数据库之间的产品,是非关系数据库当中功能最丰富, ...

  5. linux日志分析

    转一位大神的笔记. 日志管理: 1.基于服务的 2.基于时间的 /var/log/wtmp,/var/run/utmp,/var/log/lastlog(lastlog),/var/log/btmp( ...

  6. jenkins进阶-集成钉钉机器人(6)

    最早做Jenkins发布完成以后通过邮件发送信息通知相关的联系人,发现邮件会受限于大家接收的设置,导致不能及时的看到相关的发布内容,公司使用钉钉做为公司内部的通讯工具,所以想通过Jenkins发布完成 ...

  7. golang init函数

    init函数有一下几点特性: init函数在main执行之前,自动被调用执行的,不能显示调用 每个包的init函数在包被引用时,自动被调用 每个包可以有多个init函数 同一个文件中可定义多个init ...

  8. Gitlab Jenkins WebHook 持续集成配置踩坑记

    Jenkins相关介绍 Jenkins是一个开源软件项目,是基于Java开发的一种持续集成工具,用于监控持续重复的工作,旨在提供一个开放易用的软件平台,使软件的持续集成变成可能. 目的 配置Gitla ...

  9. each与list的用法（PHP学习）

    1.each的用法 先看API array each ( array &$array ) api里是这么描述的:each — 返回数组中当前的键/值对并将数组指针向前移动一步 我们先来看看返回 ...

  10. java.net.SocketTimeoutException: Read timed out 错误解决

    这两天项目在测试环境下通过URLConnection 做数据传递时,出现了如下错误 java.net.SocketTimeoutException: Read timed out 经过查找研究,原因是 ...