zoukankan      html  css  js  c++  java
  • canvas绘图详解-08-样式填充

    样式填充

    fillStyle = color    颜色值

         gradient    渐变色

                  image     图片

         canvas    画布

         video      视频

     strokeStyle也适用

     1、fillStyle = color可以填充任何css承认的颜色值

    2、fillStyle = gradient    渐变色(线性渐变||镜像渐变)

    var linearGrd = context.createLinearGradient( 50,50,300,300);
    linearGrd.addColorStop(0.0,"#fff");
    linearGrd.addColorStop(0.5,"#ff0");
    linearGrd.addColorStop(1.0,"#f00");
    
    context.fillStyle = linearGrd;
    context.fillRect(0,0,800,800);
    var radialGrd = context.createRadialGradient( 200,200,400,500,200,400);
    radialGrd.addColorStop(0.0,"#fff");
    radialGrd.addColorStop(0.25,"#0f0");
    radialGrd.addColorStop(0.5,"#ff0");
    radialGrd.addColorStop(0.75,"#00f");
    radialGrd.addColorStop(1.0,"#f00");
    
    context.fillStyle = radialGrd;
    context.fillRect(0,0,800,800);

    3、fillStyle = image||canvas||video 

    图片填充

    <script type="text/javascript">
            window.onload=function(){
                var canvas = document.getElementById('canvas');
                var context = canvas.getContext('2d');
                canvas.width = 1200;
                canvas.height = 800;
    
                var img = new Image();
                img.src = "QQ截图20170116150903.png";
    
                img.onload =function(){
                    var grd = context.createPattern(img,"repeat-x");
                    context.fillStyle = grd;
                    context.fillRect(0,0,800,800);
                }
            }
        </script>

    画布填充

    <script type="text/javascript">
            window.onload=function(){
                var canvas = document.getElementById('canvas');
                var context = canvas.getContext('2d');
    
                //添加另一个Canvas画布
                var backCanvas = createBackgroundCanvas();
                var pattern = context.createPattern(backCanvas,"repeat");
                context.fillStyle = pattern;
                context.fillRect(0,0,800,800);
                              
                }
                function createBackgroundCanvas(){
                    //document.createElement('canvas')这块是创造
                    var backCanvas = document.createElement('canvas');
                    backCanvas.width = 100;
                    backCanvas.height = 100;
                    var backCanvasContext = backCanvas.getContext('2d');
                    drawStar(backCanvasContext,50,50,50,0);
                    return backCanvas;
                }
                function drawStar(cxt,x,y,R,rot) {
                    cxt.save();
    
                    cxt.translate(x,y);
                    cxt.rotate(rot/180*Math.PI);
                    cxt.scale(R,R);
    
                    starPath(cxt);
    
                    cxt.fillStyle="#fb3";
                    cxt.fill();
    
                    cxt.restore();
                }
    
                function starPath(cxt){
                    cxt.beginPath();
                    for(var i=0; i<5; i++){
                        cxt.lineTo(Math.cos((18+i*72)/180*Math.PI),
                            -Math.sin((18+i*72)/180*Math.PI));
                        cxt.lineTo(Math.cos((54+i*72)/180*Math.PI)*0.5,
                            -Math.sin((54+i*72)/180*Math.PI)*0.5);
                    }
                    cxt.closePath();
                }
            </script>
  • 相关阅读:
    JavaScript相关知识
    JQ定义
    将博客搬至CSDN
    javascript权威指南笔记(第6章 对象)
    高性能javascript(第一章 加载和运行)
    javascript高级程序设计笔记(第4章 变量、作用域和内存问题)
    浏览器加载渲染HTML、DOM、CSS、 javascript、image、flash、iframe、src属性等资源的顺序总结
    mac 快捷键
    javascript的执行顺序
    javascript高级程序设计笔记(第1章~第3章)
  • 原文地址:https://www.cnblogs.com/wufangfang/p/6374997.html
Copyright © 2011-2022 走看看