1. <!DOCTYPE html>
  2. <html>
  3. <head>
  4.     <meta charset="UTF-8">
  5.     <title>canvas</title>
  6.     <script type="text/javascript" src="../js/jQuery.js"></script>
  7.     <style type="text/css">
  8.         *{
  9.             margin: 0;
  10.             padding: 0;
  11.             outline: none;
  12.             border: none;
  13.         }
  14.         #canvas{
  15.             width: 7rem;
  16.             margin: .25rem 0 0 1.5rem;
  17.             border: 1px solid black;
  18.         }
  19.     </style>
  20. </head>
  21. <body>
  22.     <canvas id="canvas" width="1000" height="600"></canvas>
  23. </body>
  24. </html>
  25. <script type="text/javascript">
  26.     /**
  27.      * rem 布局初始化
  28.      */
  29.     $('html').css('font-size', $(window).width()/10);
  30.     /**
  31.      * 获取 canvas 画布
  32.      * 获取 canvas 绘图上下文环境
  33.      */
  34.     var canvas = $('#canvas')[0];
  35.     var cxt = canvas.getContext('2d');
  37.     /**
  38.      * 创建图片填充样式
  39.      * 一: createPattern( 图片对象, 重复方式 )
  40.      * 二: createPattern( canvas对象, 重复方式)
  41.      * 三: createPattern( 视频对象, 重复方式)
  42.      */
  44.     /*
  45.     var img = new Image();
  46.     img.src = "../img/favicon.ico";
  47.     img.onload = function(){
  48.         var pattern = cxt.createPattern(img, "repeat");
  49.         cxt.fillStyle = pattern;
  50.         cxt.fillRect(0, 0, 1000, 600);
  51.     }
  52.     */
  54.     var fiveStartPath = function(cxt){
  55.         cxt.beginPath();
  56.         var x = 0; y = 0;
  57.         for(var i = 0; i < 5; i++){
  58.             x = Math.cos((18+72*i)/180*Math.PI);
  59.             y = Math.sin((18+72*i)/180*Math.PI);
  60.             cxt.lineTo(x, 0-y);
  61.             x = Math.cos((54+72*i)/180*Math.PI)/2.0;
  62.             y = Math.sin((54+72*i)/180*Math.PI)/2.0;
  63.             cxt.lineTo(x, 0-y);
  64.         }
  65.         cxt.closePath();
  66.     }
  68.     var drawFiveStar = function(cxt, fiveStart){
  69.         cxt.save();
  70.         cxt.translate(fiveStart.offsetX, fiveStart.offsetY);
  71.         cxt.rotate(fiveStart.RotationAngle/180*Math.PI);
  72.         cxt.scale(fiveStart.Radius, fiveStart.Radius);
  73.         fiveStartPath(cxt);
  74.         cxt.fillStyle = "yellow";
  75.         cxt.fill();
  76.         cxt.restore();
  77.     }
  79.     var createCanvas = function(){
  80.         var canvas = document.createElement("canvas");
  81.         canvas.width = 100;
  82.         canvas.height = 100;
  83.         var cxt = canvas.getContext('2d');
  84.         var fiveStart = {
  85.             Radius: 50,
  86.             offsetX: 50,
  87.             offsetY: 50,
  88.             RotationAngle: 0
  89.         }
  90.         drawFiveStar(cxt, fiveStart);
  91.         return canvas;
  92.     }
  94.     var canvasBackground = createCanvas();
  95.     var patten = cxt.createPattern(canvasBackground, "repeat");
  96.     cxt.fillStyle = patten;
  97.     cxt.fillRect(0, 0, 1000, 600);
  98. </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. OJ链接

    BNU..好难找..http://www.bnuoj.com

  2. 《DSP using MATLAB》 Problem 4.9

    代码: %% ---------------------------------------------------------------------------- %% Output Info a ...

  3. PowerCollections

    Wintellect 的Power collections 库 BigList<String> str = new BigList<String>(); str.Add(&qu ...

  4. 在 php 7.3 中 switch 语句中使用 continue

    在 php 7.3 中 switch 语句中使用 continue 在 php 7.3 的 switch 中使用 continue 会出现警告.1 2 3 while ($foo) { switch ...

  5. openwrt lamp

    https://applefreak111.wordpress.com/2013/03/12/howtoopenwrt-lamp-stack%E5%AE%89%E8%A3%9D/ opkg updat ...

  6. Linux 下V4l2摄像头采集图片，实现yuyv转RGB,RGB转BMP，RGB伸缩，jpeglib 库实现压缩RGB到内存中，JPEG经UDP发送功(转)

    ./configure CC=arm-linux-gnueabihf-gcc LD=arm-linux-gnueabihf-ld --host=arm-linux --prefix=/usr/loca ...

  7. Linux中的其他命令

    1.  修改文件的所有者 chown 用户名  文件名 2. 修改文件所属组 chgrp 组名  文件名 3. 创建用户,创建组,将用户添加到组中等 修改film文件夹的所有者和所属组 修改film文 ...

  8. Python——collections模块、time模块、random模块、os模块、sys模块

    1. collections模块 (1)namedtuple # (1)点的坐标 from collections import namedtuple Point = namedtuple('poin ...

  9. 【python】网络编程-UDP协议套接字

    服务器端: #!/usr/bin/env python from socket import * from time import ctime HOST = '' PORT = 21567 BUFSI ...

  10. 白话 Java Bean

    所谓的Java Bean,就是一个java类,编译后成为了一个后缀名是 .class的文件.这就是Java Bean,不就是Java类吗? 1. 什么是 Java Bean? 很多培训机构在讲java ...