Context的学习

最新推荐文章于 2024-02-03 00:00:00 发布

李过饰非

最新推荐文章于 2024-02-03 00:00:00 发布

阅读量1k

点赞数

分类专栏： HTML5 文章标签： html5 javascript canvas

本文链接：https://blog.csdn.net/qq_28702545/article/details/51764636

版权

HTML5 专栏收录该内容

1 篇文章 0 订阅

订阅专栏

canvas对象

HTML5 的 canvas 元素使用 JavaScript 在网页上绘制图像。
画布是一个矩形区域，您可以控制其每一像素。
canvas 拥有多种绘制路径、矩形、圆形、字符以及添加图像的方法。
定义如下

<canvas id="canvas" width="200" height="100"></canvas>

但是canvas 元素本身是没有绘图能力的。所有的绘制工作必须在 JavaScript 内部完成，我们可以将其视作为一张画布。

<script type="text/javascript">
    var c=document.getElementById("canvas");
    var cxt=c.getContext("2d");
    cxt.fillStyle="#FF0000";
    cxt.fillRect(0,0,150,75);
</script>

上述代码首先通过id查找到canvas元素，再通过下面代码得到context对象

var cxt=c.getContext("2d");

具体小例子可以查看wc3school学习。

Context实例

一个时钟效果：

<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8" />
        <title></title>
    </head>
    <body>
        <canvas id="canvas" width="500" height="500" style="background-color: yellow;"></canvas>
        <script>
            var canvas = document.getElementById("canvas");
            var context = canvas.getContext("2d");
            function drawClock(){
                context.clearRect(0,0,500,500);
                var now = new Date();
                var sec = now.getSeconds();
                var min = now.getMinutes();
                var hours = now.getHours();
                //小时必须获取浮点类型 (小时+分钟/60)
                hours = hours+min/60;
                var hours = hours>12?hours-12:hours;

                context.lineWidth = 10;
                context.strokeStyle = "blue";
                context.beginPath();
                context.arc(250,250,200,0,360,false);
                context.closePath();
                context.stroke();

                for(var i=0;i<12;i++){
                    context.save();
                    context.lineWidth = 7;
                    context.strokeStyle = "#000";
                    context.translate(250,250);
                    context.rotate(i*30*Math.PI/180);
                    context.beginPath();
                    context.moveTo(0,-170);
                    context.lineTo(0,-190);
                    context.closePath();
                    context.stroke();
                    context.restore();
                }

                for(var i=0;i<60;i++){
                    context.save();
                    context.beginPath();
                    context.lineWidth = 3;
                    context.strokeStyle = "#000";
                    context.translate(250,250);
                    context.rotate(i*6*Math.PI/180);
                    context.moveTo(0,-180);
                    context.lineTo(0,-190);
                    context.closePath();
                    context.stroke();
                    context.restore();
                }

                context.save();
                context.lineWidth = 5;
                context.strokeStyle = "#000";
                context.beginPath();
                context.translate(250,250);
                context.rotate(hours*30*Math.PI/180);
                context.moveTo(0,-130);
                context.lineTo(0,10);
                context.closePath();
                context.stroke();
                context.restore();

                context.save();
                context.lineWidth = 3;
                context.strokeStyle = "#000";
                context.beginPath();
                context.translate(250,250);
                context.rotate(min*6*Math.PI/180);
                context.moveTo(0,-140);
                context.lineTo(0,10);
                context.closePath();
                context.stroke();
                context.restore();

                context.save();
                context.lineWidth = 1;
                context.strokeStyle = "#ff0000";
                context.beginPath();
                context.translate(250,250);
                context.rotate(sec*6*Math.PI/180);
                context.moveTo(0,-160);
                context.lineTo(0,15);
                context.closePath();
                context.stroke();
                context.restore();
            }
            setInterval(drawClock,1000);
        </script>
    </body>
</html>

上述代码完成了一个web页面的时钟功能，具体的效果可以新建一个html文件，将其代码复制下来，最后将其拖到支持h5的浏览器即可运行。
效果如下：

这里写图片描述

李过饰非

关注

0
点赞
踩
1

收藏

觉得还不错? 一键收藏
0
评论
Context的学习

canvas对象HTML5 的 canvas 元素使用 JavaScript 在网页上绘制图像。画布是一个矩形区域，您可以控制其每一像素。 canvas 拥有多种绘制路径、矩形、圆形、字符以及添加图像的方法。定义如下<canvas id="canvas" width="200" height="100"></canvas>但是canvas 元素本身是没有绘图能力的。所有的绘制工作必须在 J
复制链接

扫一扫

专栏目录