HTML5的canvas元素的简单使用

最新推荐文章于 2024-05-14 10:20:04 发布

ITPlus

最新推荐文章于 2024-05-14 10:20:04 发布

阅读量2.3k

点赞数 1

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

本文链接：https://blog.csdn.net/Jiang_Rong_Tao/article/details/52330285

版权

html5 专栏收录该内容

4 篇文章 0 订阅

订阅专栏

瞬间觉得H5很强大可以绘制出很多很漂亮，很炫的效果。其实在android中onDraw也可以实现很多很炫的效果，比如Path类；其实编程语言是相通的，如果你会用android下View的相关绘制的API,可以借鉴到H5中,因为他们都是在canvas操作的，下面就是我学的第一个元素canvas(画布)的基本用法。

1、在页面中添加canvas元素

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>canvas元素的使用</title>
</head>
<body>
        <canvas id="myCanvas" style="border: 1px solid"  height="300" width="500"></canvas>
</body>
</html>

这里我定义了一个高300xp,宽500px，带有边框的画布。

2、检测浏览器对canvas标签的支持（有两种方法）

方法一：在canvas标签内加上相关提示语，如果浏览器不支持canvas标签时就会显示下面的这段提示语

<canvas id="myCanvas" width="500" height="300" style="border: 2px solid">
    您的浏览器不支持canvas标签，请你更新或更换浏览器！
</canvas>

方法二：判断context这个上下文是否存在进行判定，存在就支持canvas,不存在就不支持，因为所有的绘制方法都是基于context的

<canvas id="myCanvas" width="500" height="300" style="border: 2px solid">
    您的浏览器不支持canvas标签，请你更新或更换浏览器！
</canvas>
<script type="text/javascript">
    var mCanvas=document.getElementById("myCanvas");
    if(mCanvas.getContext){
        alert("您的浏览器支持Canvas标签");
    }else{
        alert("您的浏览器不支持Canvas标签");
    }
</script>

这里写图片描述

3、canvas绘制常用的图形

首先要知道实心和空心的区别就是调用不同的方法，实心填充调取fillXXX相关的方法或属性，空心绘制调取stroke相关的方法或属性

(1)绘制直线
绘制直线主要用到两个方法： moveTo(x,y)和lineTo(x,y)；

<!--绘制直线-->
<canvas id="myCanvas" width="500" height="300" style="border: 2px solid #ff53f1" ></canvas>
<script type="text/javascript">
    var mContext = document.getElementById("myCanvas").getContext("2d");
    mContext.strokeStyle="#ff53f1";
    //从（0，0）点出发到(500,300)点结束
    mContext.moveTo(0,0);
    mContext.lineTo(500,300);
    mContext.stroke();
</script>

这里写图片描述

（2）绘制矩形
strokeRect(x,y,w,h)和fillRect(x,y,w,h)；是用来绘制矩形的方法，其中下x和y表示矩形左上角的坐标，w和h分别表示绘制矩形的宽和高。

<!--绘制矩形-->
<canvas id="myCanvas" width="500" height="300" style="border: 2px solid"></canvas>
<script type="text/javascript" >
    var mContext=document.getElementById("myCanvas").getContext("2d");
    /*  mContext.fillStyle="rgb(39,145,200)";
    mContext.fillRect(0,0,500,300);*/
    mContext.strokeStyle="#ff0000"
    mContext.strokeRect(10,10,300,200);
</script>

这里写图片描述

H5中颜色值得不同表示形式：十六进制，rgb（0-255）,英文单词，百分比

<!--绘制矩形 各种颜色色值得不同表示方式-->
<!--<canvas id="myCanvas" width="500" height="300" style="border: 2px solid #ff53f1"></canvas>
<script type="text/javascript">
    var mContext = document.getElementById("myCanvas").getContext("2d");
    mContext.fillStyle = "#ff53f1";
    mContext.fillRect(0, 0, 400, 250);
    mContext.fillStyle = "red"
    mContext.fillRect(10, 10, 410, 260);
    mContext.fillStyle = "rgb(200,152,99)";
    mContext.fillRect(20, 20, 420, 270);
    mContext.fillStyle = "rgb(10%,35%,60%)";
    mContext.fillRect(30, 30, 430, 280);
</script>-->

这里写图片描述
（3）绘制圆形或弧形
beginPath();
arc(x,y,radius,startAngle,endAngle,b)
closePath();
beginPath和closePath组合实现封闭的路径，如果绘制完成的时候不调用 closePath()，那么图形就不会形成闭合（在绘制空心图形的时候才能体现出来）。

   mContext.beginPath();
    mContext.arc(250, 150, 150, 0, Math.PI * 2/3, true);
    mContext.stroke();

这里写代码片
arc用来画弧度，x和y用来确定圆心，startAngle和endAngle分别表示起始的角度值，b是一个boolean值，表示是否按顺时钟绘制。

<!--绘制圆形-->
<canvas id="myCanvas" width="500" height="300" style="border: 2px solid #ff53f1"></canvas>
<script type="text/javascript">
    var mContext = document.getElementById("myCanvas").getContext("2d");
    /*实心圆*/
    mContext.fillStyle = "#ff53f1";
    mContext.beginPath();
    mContext.arc(250, 150, 75, 0, Math.PI * 2, true);
    mContext.closePath();
    mContext.fill();
    /*虚心圆*/
    mContext.strokeStyle="rgb(205,90,255)";
    mContext.beginPath();
    mContext.arc(250, 150, 150, 0, Math.PI * 2, true);
    mContext.closePath();
    mContext.stroke();
</script>

这里写图片描述

弧形是圆的一部分，所以我们通过改变结束的角度endAngle，就可以控制图形的具体形状

（4）绘制三角形
三角形的绘制原理就是通过beginPath()和closePath()实现路径闭合，moveTo和lineTo实现三条边的绘制。

<!--绘制三角形-->
<canvas id="myCanvas" width="500" height="300" style="border: 2px solid #ff134f"></canvas>
<script type="text/javascript">
    var mContext = document.getElementById("myCanvas").getContext("2d");
    mContext.fillStyle="#ff143f";
    mContext.beginPath();
    mContext.moveTo(10,10);
    mContext.lineTo(490,10);
    mContext.lineTo(100,300);
    mContext.closePath();
    mContext.fill();
</script>

这里写图片描述

（5）绘制贝塞尔曲线
用moveTo(x0,y0)和quadraticCurveTo(cpx,cpy,x,y)绘制二阶贝塞尔曲线。
(x0,y0)表示起点，(cpx,cpy）表示支撑点，（x,y）表示终点

<!--绘制二次方贝塞尔曲线-->
<canvas id="myCanvas" style="border: 1px solid #4260ff"  height="300" width="500"></canvas>
 <script type="text/javascript">
     var mContext=document.getElementById("myCanvas").getContext("2d");
     mContext.strokeStyle="#42f0fe";
     mContext.moveTo(0,300);
     mContext.quadraticCurveTo(100,100,400,275);
     mContext.stroke();
     mContext.globalCompositeOperation='source-over'
     /*绘制直线用于表示二次贝塞尔曲线的控制点和控制线*/
     mContext.strokeStyle="#42f0fe";
     mContext.moveTo(0,300);
     mContext.lineTo(100,100);
     mContext.moveTo(100,100);
     mContext.lineTo(400,275);
     mContext.stroke();
 </script>

这里写图片描述

三次贝塞尔曲线 bezierCurveTo(cpx1,cpy1，cpx2,cpy2,x,y)，就是多了（cpx2,cpy2）一个支撑点。

<!--绘制三次方贝塞尔曲线-->
<canvas id="myCanvas" style="border: 1px solid #4260ff"  height="300" width="500"></canvas>
<script type="text/javascript">
    var mContext=document.getElementById("myCanvas").getContext("2d");
    mContext.strokeStyle="#ff0f00";
    mContext.moveTo(0,300);
    mContext.bezierCurveTo(100,100,110,120,400,295);
    mContext.stroke();
    mContext.globalCompositeOperation='source-over'
    /*绘制直线用于表示三次贝塞尔曲线的控制点和控制线*/
    mContext.strokeStyle="#42f0fe";
    mContext.moveTo(100,100);
    mContext.lineTo(0,300);
    mContext.moveTo(110,120);
    mContext.lineTo(400,295);
    mContext.stroke();
</script>

这里写图片描述

（6）绘制文字和螺旋状图案
fillText(text,x,y,maxWidth)和strokeText(text,x,y,maxWidth)用来绘制文字。

text：绘制的文本
(x,y)绘制的坐标
maxWidth绘制的最大宽度

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>实现螺旋状图案</title>
    <script language="javascript">
        function  draw(){
            mContext.translate(200,20);
            for(var i=0;i<80;i++){
                mContext.save();//保存绘制状态
                mContext.translate(30,30);
                mContext.scale(0.95,0.95);
                mContext.rotate(Math.PI/12);
                mContext.beginPath();
                switch (i%3){
                    case 0:
                        mContext.fillStyle="red";
                        break;
                    case 1:
                        mContext.fillStyle="blue";
                        break;
                    case 2:
                        mContext.fillStyle="green";
                        break;
                }
                mContext.globalAlpha="0.4";
                mContext.arc(0,0,50,0,Math.PI*2,true);
                mContext.closePath();
                mContext.fill();
            }
        }
        window.onload=function(){
            draw();
        }
    </script>
</head>
<body>
<canvas id="myCanvas" width="350" height="300" style="background:#e41aff ;border: 2px solid #2922ff " ></canvas>
<script type="text/javascript">
    var mContext=document.getElementById("myCanvas").getContext("2d");
    mContext.font="italic 25px 微软雅黑";
    mContext.fillStyle="yellow";
    mContext.fillText("HTML5效果好炫",0,25);
    mContext.font="italic 25px 微软雅黑";
    mContext.strokeStyle="#000000";
    mContext.strokeText("HTML5效果好炫",5,70);
</script>
</body>
</html>

这里写图片描述

看到translate，scale，rotate我们会想到android中的补间动画。

（7）清空画布
最后我们来清空画布，调用clearRect，其实就是清除一个矩形。

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>清空画布</title>
    <script type="text/javascript">
        function clearMap(){
            mContext.clearRect(0,0,500,300);
        }
    </script>
</head>
<body>
<canvas id="myCanvas" width="500" height="300" style="border: 2px solid #ff134f"></canvas>
<script type="text/javascript">
    var mContext = document.getElementById("myCanvas").getContext("2d");
    mContext.strokeStyle="#f6143f";
    mContext.beginPath();
    mContext.moveTo(10,10);
    mContext.lineTo(250,300);
    mContext.lineTo(490,10);
    mContext.closePath();
    mContext.stroke();
</script>
<input type="button" value="清空画布" onclick="clearMap()">
</body>
</html>

ITPlus

关注

1
点赞
踩
1

收藏

觉得还不错? 一键收藏
0
评论
HTML5的canvas元素的简单使用

瞬间觉得H5很强大可以绘制出很多很漂亮，很炫的效果。其实在android中onDraw也可以实现很多很炫的效果，比如Path类；其实编程语言是相通的，如果你会用android下View的相关绘制的API,可以借鉴到H5中,因为他们都是在canvas操作的，下面就是我学的第一个元素canvas(画布)的基本用法。1、在页面中添加canvas元素<!DOCTYPE html><html lang="
复制链接

扫一扫