HTML5 Canvas ( 图片填充样式 ) fillStyle, createPattern

<!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>
时间: 03-26

HTML5 Canvas ( 图片填充样式 ) fillStyle, createPattern的相关文章

HTML5 Canvas ( 图片绘制 转化为base64 )

<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title>canvas</title> <script type="text/javascript" src="../js/jQuery.js"></script> <style type="text/css">

html5 canvas图片渐变

<!doctype html> <html> <head> <meta charset="utf-8"> <title>无标题文档</title> <script> window.onload = function () { var oc = document.getElementById('c1'); var ogc = oc.getContext('2d'); var yimg = new Imag

html5 canvas图片翻转

<!doctype html> <html> <head> <meta charset="utf-8"> <title>无标题文档</title> <script> window.onload = function () { var oc = document.getElementById('c1'); var ogc = oc.getContext('2d'); var yimg = new Imag

html5 canvas图片反色

<!doctype html> <html> <head> <meta charset="utf-8"> <title>无标题文档</title> <script> window.onload = function () { var oc = document.getElementById('c1'); var ogc = oc.getContext('2d'); var yimg = new Imag

html5 Canvas颜色渐变(画图很重要)

如果我们想要给图形上色,有两个重要的属性可以做到:fillStyle 和 strokeStyle.    fillStyle = color    strokeStyle = color strokeStyle 是用于设置图形轮廓的颜色,而 fillStyle 用于设置填充颜色.color 可以是表示 CSS 颜色值的字符串,渐变对象或者图案对象.默认情况下,线条和填充颜色都是黑色(CSS 颜色值 #000000). 下面的例子都表示同一种颜色.   // 这些 fillStyle 的值均为 '

8个经典炫酷的HTML5 Canvas动画欣赏

HTML5非常强大,尤其是Canvas技术的应用,让HTML5几乎可以完成所有Flash能完成的效果.本文精选了8个经典炫酷的HTML5 Canvas动画欣赏,每一个都提供全部的源代码,希望对你有所帮助. 1.HTML5 Canvas可拖动的弹性大树摇摆动画 今天让我们继续来分享一个炫酷的HTML5动画,它是一款基于HTML5 Canvas的大树摇摆动画,这款HTML5动画的特点是我们可以拖拽树枝,从而让整棵树摇摆起来,这样就真实地模拟了大树从摇摆到静止的整个过程,相当逼真. 在线演示     

html5 canvas实现图片玻璃碎片特效

今天要为大家带来一款html5 canvas实现的图片玻璃碎片特效.图片以玻璃碎片的形式出现到界面中,然后似玻璃被打碎的效果渐消息.效果图如下: 在线预览   源码下载 实现代码: html代码: <img src="city_copy.jpg" id="src_img" class="hidden"> <div id="container" style="-webkit-perspective:

基于HTML5 Canvas实现的图片马赛克模糊特效

效果请点击下面网址: http://hovertree.com/texiao/html5/1.htm 一.开门见山受美国肖像画家Chuck Close的启发,此脚本通过使用HTML5 canvas元素把图像转换成像素形式,这基本上是一个为canvas imageData功能的简单演示. 此脚本现存于GitHub上,您可以在那里下载到脚本和示例.在GitHub上查看像素化资源 二.选项此方法接受一个对象数组,每个对象都拥有一组选项.resolution : 渲染像素间的像素距离,必须的.shape

html5 canvas 详细使用教程

导航 前言 基本知识 绘制矩形 清除矩形区域 圆弧 路径 绘制线段 绘制贝塞尔曲线 线性渐变 径向渐变(发散) 图形变形(平移.旋转.缩放) 矩阵变换(图形变形的机制) 图形组合 给图形绘制阴影 绘制图像(图片平铺.裁剪.像素处理[不只图像.包括其他绘制图形]) 绘制文字 保存和恢复状态(context) 保存文件 结合setInterval制作动画 结语.demo下载   前言 <canvas></canvas>是html5出现的新标签,像所有的dom对象一样它有自己本身的属性.