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

2024-04-27 15:03:18

字体：大中小

来源：转载

供稿：网友

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 onload="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 onload="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.onload=function(){                drawImage(context,image);            }        }        function drawImage(context,image){            context.drawImage(image,0,0,500,500);        }    </script></head><body onload="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>

上一篇：jquery.datatables添加跳转到指定页

下一篇：webpack如何全局引入jquery和插件?