html 绘图渐变和图片填充

最新推荐文章于 2022-12-01 12:46:17 发布

weixin_30667301

最新推荐文章于 2022-12-01 12:46:17 发布

阅读量90

点赞数

文章标签： javascript ViewUI

原文链接：http://www.cnblogs.com/superxuezhazha/p/5714875.html

版权

包括线性渐变和径向渐变

<!DOCTYPE html>
<html>
<head lang="en">
    <meta charset="UTF-8">
    <title></title>
    <style>
        #mycanvas{
            border: 1px solid #9c9898;
            background: white;
        }

    </style>
    <script language="JavaScript">
        window.onload=function(){
            var canvas = document.getElementById("mycanvas");
            var contex = canvas.getContext("2d");
            //线性渐变
            var clg=contex.createLinearGradient(0,0,200,0);
            clg.addColorStop(0,"#ff0000");
            clg.addColorStop(0.5,"#00ff00");
            clg.addColorStop(1,"#0000ff");
            contex.fillStyle=clg;
            contex.strokeStyle=clg;
            contex.fillRect(10,10,200,200);

            //径向渐变
            var crg=contex.createRadialGradient(325,100,20,325,100,80);
            crg.addColorStop(0,"#ff0000");
            crg.addColorStop(0.75,"#00ff00");
            crg.addColorStop(1,"#0000ff");
            contex.fillStyle=crg;
            //contex.strokeStyle=crg;
            contex.fillRect(230,10,200,200);
        }
    </script>
</head>
<body>
<canvas id="mycanvas" width="800" height="800"></canvas>
</body>
</html>

填充图片，有四种填充方式

<!DOCTYPE html>
<html>
<head lang="en">
    <meta charset="UTF-8">
    <title></title>
    <style>
        #mycanvas{
            border: 1px solid #9c9898;
            background: blue;
        }
        button{
            height: 80px;
            width: 200px;
        }
    </style>
    <script language="JavaScript">
        function draw(type){
            var canvas = document.getElementById("mycanvas");
            var contex = canvas.getContext("2d");
            contex.clearRect(0,0,500,200);
            var img =document.getElementById("cf");
            var pat = contex.createPattern(img,type);
            contex.rect(0,0,canvas.width,canvas.height);
            contex.fillStyle=pat;
            contex.fill();
        }

    </script>
</head>
<body>
    <img src="1.png" id="cf" width="50 " height="50"><br>
    <button onclick="draw('repeat-x')" >repeat-x</button>
    <button onclick="draw('repeat-y')">repeat-y</button>
    <button onclick="draw('repea')">repeat</button>
    <button onclick="draw('no-repeat'')">no-repeat</button>
    <br>

    <canvas id="mycanvas" width="800" height="800"></canvas>
</body>
</html>

转载于:https://www.cnblogs.com/superxuezhazha/p/5714875.html

weixin_30667301

关注

0
点赞
踩
1

收藏

觉得还不错? 一键收藏
0
评论
html 绘图渐变和图片填充

包括线性渐变和径向渐变<!DOCTYPE html><html><head lang="en"> <meta charset="UTF-8"> <title></title> <style> #mycanvas{ b...
复制链接

扫一扫