<!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. windows dos命令

    dos命令配置环境变量: path=%path%;D:\Installed software\Professional software\Python27   (https://www.cnblogs ...

  2. Nginx访问限制模块limit_conn_zone 和limit_req_zone配置使用

    nginx可以通过limit_conn_zone 和limit_req_zone两个组件来对客户端访问目录和文件的访问频率和次数进行限制,另外还可以善用进行服务安全加固,两个模块都能够对客户端访问进行 ...

  3. 【socket编程】什么是socket编程

    Socket简介 Socket是进程通讯的一种方式,即调用这个网络库的一些API函数实现分布在不同主机的相关进程之间的数据交换. 几个定义: (1)IP地址:即依照TCP/IP协议分配给本地主机的网络 ...

  4. Java JDK 版本的区别

    jdk6和jdk5相比的新特性有: 1.instrumentation 在 Java SE 6 里面,instrumentation 包被赋予了更强大的功能:启动后的 instrument.本地代码 ...

  5. JSONObject JSONArray json字符串 HashMap ArryList 在java开发中用到的数据结构

    1.JSONObject  长成这样的:   { "key1":value1, "key2":value2, "key3":value3} ...

  6. spring boot中，jar包、war包的区别

    jar包.war包 比较(表格) 项目 jar包 war包 在开发调试完成之后,可以将应用打成JAR包的形式,可以直接使用Maven插件的package命令,最终会形成一个可运行的 JAR包.我们使用 ...

  7. JVM 之：Java 内存区域与内存溢出

    内存区域 Java 虚拟机在执行 Java 程序的过程中会把他所管理的内存划分为若干个不同的数据区域.Java 虚拟机规范将 JVM 所管理的内存分为以下几个运行时数据区:程序计数器.Java 虚拟机 ...

  8. mysql复制表结构create table as和like的区别

    对于MySQL的复制相同表结构方法,有create table as 和create table like 两种,区别是什么呢? create table t2 as select * from t1 ...

  9. ORACLE基本操作备忘

    通过CMD登录SQLPLUS 的语句 C:\Users\Administrator>sqlplus /nolog SQL> conn sys/pwd as sysdba; 导入导出数据库( ...

  10. oracle schema 白话文详解

    概述: (一)什么Oracle叫用户(user): A user is a name defined in the database that can connect to and access ob ...