HTML5 学习笔记15-Canvas图形绘制处理

最新推荐文章于 2021-06-24 23:28:50 发布

RonnyZhao

最新推荐文章于 2021-06-24 23:28:50 发布

阅读量249

点赞数

分类专栏：学习笔记文章标签： canvas 图形

本文链接：https://blog.csdn.net/qq_19919127/article/details/54846499

版权

学习笔记专栏收录该内容

15 篇文章 0 订阅

订阅专栏

1、图形组合

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>图形组合</title>
    <script>
        function draw() {
            var canvas=document.getElementById("mycanvas");
            var context=canvas.getContext("2d");
            var options=new Array(
                    "source-atop",
                    "source-in",
                    "source-out",
                    "source-over",
                    "destination-atop",
                    "destination-in",
                    "destination-out",
                    "destination-over",
                    "lighter",
                    "copy",
                    "xor"
            );
            i=0; /*i=0,1,2.......,10分别测试效果*/
            context.fillStyle="blue";
            context.fillRect(10,10,60,60);
            context.globalCompositeOperation=options[i];
            context.beginPath();
            context.fillStyle="red";
            context.arc(60,60,30,Math.PI*2,false);
            context.fill();
        }
    </script>
</head>
<body οnlοad="draw()">
    <!--使用canvas api将一个图形重叠绘制在另一个图形上面，但推行中能看到的部分完全取决于推行的绘制顺序-->
    <canvas id="mycanvas" width="500" height="500"></canvas>
</body>
</html>

2、给图形绘制阴影

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>给图形绘制阴影</title>
    <script>
        function draw() {
            var canvas=document.getElementById("mycanvas");
            var context=canvas.getContext("2d");
            context.fillStyle="#eeeeee";
            context.fillRect(0,0,500,500);
            context.shadowOffsetX=10;
            context.shadowOffsetY=10;
            context.shadowColor="rgba(100,100,100,0.5)";
            context.shadowBlur=7.5;

            context.translate(0,50);
            for(var i=0;i<3;i++){
                context.translate(50,50);
                drawFiveStar(context);
                context.fill();
            }
        }
        function drawFiveStar(context) {
            var n=0;
            var dx=100;
            var dy=0;
            var s=50;
            context.beginPath();
            context.fillStyle="rgba(255,0,0,0.5)";
            var x=Math.sin(0);
            var y=Math.cos(0);
            var dig=Math.PI/5*4;
            for(var i=0;i<5;i++){
                var x=Math.sin(i*dig);
                var y=Math.cos(i*dig);
                context.lineTo(dx+x*s,dy+y*s);
            }
            context.closePath();
        }
    </script>
</head>
<body οnlοad="draw()">
    <!--使用canvas元素可以给图形添加阴影效果。添加时，只需利用图形上下文独享的几个关于阴影绘制的属性就可以了-->
    <!--shadowOffsetX 阴影横向位移 shadowOffsetX 阴影纵向位移 shadowColor阴影颜色 shadowBlur阴影模糊程度-->
    <canvas id="mycanvas" width="500" height="500"></canvas>
</body>
</html>

3、绘制图像

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>绘制图像</title>
    <script>
        function draw(){
            var canvas=document.getElementById("mycanvas");
            var context=canvas.getContext("2d");
            context.fillStyle="eeeeee";
            context.fillRect(0,0,500,500);
            var image=new Image();
            image.src="h2.jpg";
            image.οnlοad=function(){
                drawImage(context,image);
            }
        }
        function drawImage(context,image){
            context.drawImage(image,0,0,500,500);
        }
    </script>
</head>
<body οnlοad="draw()">
    <!--
    context.drawImage(img,x,y);
    context.drawImage(img,x,y,w,h);
    context.drawImage(img,sx,sy,sw,sh,dx,dy,dw,dh);
    -->
    <canvas id="mycanvas" width="500" height="500"></canvas>
</body>
</html>

RonnyZhao

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
HTML5 学习笔记15-Canvas图形绘制处理

1、图形组合图形组合 function draw() { var canvas=document.getElementById("mycanvas"); var context=canvas.getContext("2d"); var options=new Array(
复制链接

扫一扫