HTML5 Canvas基础练习

最新推荐文章于 2020-03-02 17:13:21 发布

原创最新推荐文章于 2020-03-02 17:13:21 发布 · 866 阅读

1 ·

CC 4.0 BY-SA版权

文章标签：

#html5 #canvas #图形

JavaScript高级程序设计（第三版）学习心得专栏收录该内容

3 篇文章

订阅专栏

本文介绍如何使用HTML5的Canvas API进行图形绘制，包括基本的矩形绘制、渐变填充、图像裁剪及阴影效果等。通过具体示例展示了如何创建矩形、设置渐变、绘制图像和实现阴影等功能。

使用HTML5中的canvas来创建图形，创建矩形，渐变，图像裁剪，阴影：

<!DOCTYPE html>
<html>
    <head>
        <meta charset="UTF-8">
        <title>使用Canvas绘图</title>
    </head>
    <body>
        <canvas id="canvas" width="800" height="600"></canvas>
        <img src="img/cart.png" />

        <script type="text/javascript">     
            var canvas = document.getElementById("canvas");
            var ctx = canvas.getContext("2d");
            ctx.shadowOffsetX = 5;//阴影的x轴偏移量（px）
            ctx.shadowOffsetY = 5;//阴影的y轴偏移量（px）
            ctx.shadowBlur    = 4;//阴影的模糊度（px）
            ctx.shadowColor  = "rgba(0,0,0,0.5)"; //阴影的颜色
            //填充矩形
            //fillRect接受四个参数：x,y,width,height。即起始坐标(x,y),矩形的宽和高
            ctx.fillStyle = "red";          
            ctx.fillRect(10, 10, 50, 50);           
            ctx.fillStyle = "rgba(0, 0, 255, 0.5)";
            ctx.fillRect(30, 30, 50, 50);

            ctx.clearRect(40, 40, 10, 10);//清除画布上的矩形区域
            //描边矩形
            ctx.strokeStyle = "#3193D0";
            ctx.strokeRect(50, 50, 50, 50);     
            ctx.strokeStyle = "#F74E0D";
            ctx.strokeRect(70, 70, 50, 50); 

            //绘制路径,绘制一个表盘
            ctx.strokeStyle = "blue";
            ctx.beginPath();
            //绘制外圆
            ctx.arc(250, 100, 99, 0, 2*  Math.PI, false);
            //绘制内圆
            ctx.moveTo(344, 100);//移到绘制圆形的起点处
            ctx.arc(250, 100, 94, 0, 2 * Math.PI, false);
            //绘制秒针
            var j = 0;
            ctx.moveTo(250, 100);
            ctx.lineTo(250, 25);
            //绘制分针
            ctx.moveTo(250, 100);
            ctx.lineTo(200, 100);
            ctx.stroke();
            //绘制文本
            ctx.font = "bold 14px Arial";//文字字体，大小
            ctx.textAlign = "center"; //文本对齐方式
            ctx.textBaseline = "middle"; //文本的基线
            for(var i=0; i<12; i++) {
                var posX = Math.round(82 * Math.cos((Math.PI * i)/6));
                var posY = Math.round(82 * Math.sin((Math.PI * i)/6));
                var x, y, num;
                if(i >= 3 && i <= 9) {
                    y = 100 - posY;                 
                    x = 250 + posX;             
                }
                else {
                    y = 100 - posY; 
                    if( i >= 0) {
                        x = 250 + posX;
                    } else {
                        x = 250 - posX;
                    }               
                }               
                if(i < 3) {
                    num = 3 - i;
                } else {
                    num = 15 - i;
                }
                ctx.fillText(num, x, y);
            }

            //绘制图片
            var pic = document.images[0];
            //图像元素，裁剪起点x,裁剪起点y，裁剪宽，裁剪高，放置位置x，放置位置y，放置宽度，放置高度
            //下例：0,0表示从原图像的左上角（0,0）处开始裁剪，裁剪的大小为（100*80）
            //（400,100）为在canvas中的显示位置（左上角），（120,120）表示显示大小（120*120）
            ctx.drawImage(pic, 0, 0, 100, 80, 400, 100, 120, 120);//裁剪图像

            //线性渐变和径向渐变（放射渐变）
            //(90,90)渐变起点左边，(140,140)渐变结束坐标
            var linearGradient = ctx.createLinearGradient(90, 90, 140, 140);
            linearGradient.addColorStop(0, "red");
            linearGradient.addColorStop(1, "yellow");
            ctx.fillStyle = linearGradient;
            ctx.fillRect(90, 90, 50, 50);

            //（35，175,10）起始圆的原点坐标和半径，（35,175,30）终点圆的远点坐标和半径
            var radialGradient = ctx.createRadialGradient(35, 175, 10, 35, 175, 30);
            radialGradient.addColorStop(0, "purple");
            radialGradient.addColorStop(1, "pink");
            ctx.fillStyle = radialGradient;
            ctx.fillRect(10, 150, 50, 50);


        </script>
    </body>
</html>

此部分结果：
结果展示