HTML5 canvas元素

canvas元素

canvas是一套强大的图形API，有多种绘制路径，矩形、圆形、字符及添加图像的方法，可以处理从文字处理到电子游戏等各类程序。

基本属性

id、width、height
注意当浏览器不支持canvas元素时才会显示canvas元素内的内容
在这里插入图片描述

<canvas id="canvas1" width="500px" height="500px">
        定义了一块画布，不在浏览器中显示，可以在style中设置canvas来使画布显示，
        你的浏览器不支持canvas元素（当浏览器不支持时会显示canvas元素中的内容）
</canvas>

关于画布坐标（y值越往下越大）
在这里插入图片描述

canvas绘制直线

步骤

宽、高、id
提示语句
设置script元素
获取画布，设置绘图环境
设定起点：moveTo（x坐标，y坐标）
设定终点：lineTo（x坐标，y坐标）【添加新点之后这个点将会变成中间点】
开始绘制：stroke（）【绘制已定义的路径】

<canvas id="canvas" width="500px" height="500px">
        <!-- 定义了一块画布，不在浏览器中显示，可以在style中设置canvas来使画布显示，
        你的浏览器不支持canvas元素（当浏览器不支持时会显示canvas元素中的内容） -->
</canvas>
<script type="text/javascript">
        //下面两句为固定语句，var后面为定义变量名称，可以为任何符合规则的名称
        //定义变量获取画布
        var canvas=document.getElementById('canvas')
        //设置绘图环境为2d(平面)
        var c=canvas.getContext('2d')
        c.moveTo(0,0)
        c.lineTo(200,200)
        c.stroke();
</script>

(变量名称可以自定义)

添加样式

strokeStyle颜色、渐变或者模式
lineWidth线宽=数值
c.lineWidth=10;
fillStyle=颜色值；填充色
c.strokeStyle=“颜色值（只适用轮廓，线段等）”

在这里插入图片描述

c.moveTo(0,0)
c.lineTo(200,200)
c.lineWidth=30
c.strokeStyle="green"
c.stroke();

矩形绘制

beginPath()用来创建新的路径
closePath（）从当前点回到起始点的封闭路径
rect（x,y,w,h）创建矩形
strokeRect（x,y,w,h,x,y,w,h）无填充矩形
fillRect（x,y,w,h）被填充的矩形
stroke（）绘制已有路径
在这里插入图片描述

        c.beginPath();   //每次开始新的动作不受上面的变量的影响
        c.lineWidth=10;
        c.strokeStyle="grey";   //边框颜色
        c.rect(200,200,100,100);
        c.stroke();
        
        c.beginPath();
        c.lineWidth=10;
        c.fillStyle="blue";    //填充颜色
        c.fillRect(350,200,100,100);
        c.stroke();

圆弧绘制

arc() 圆弧/曲线/部分圆
arc(x,y,r,开始角度，结束角度，true/false)
（必须有stroke()和fill()才能完整显示）

属性

x，y圆心坐标 ‘
r半径数值
起始弧度和终止弧度
绘制方向（true逆时针，false顺时针）

关于角度
在这里插入图片描述
注意：与普通的坐标象限不相同。

        c.beginPath();
        c.lineWidth=10
        c.strokeStyle="green"
        c.fillStyle="blue"
        c.arc(100,100,30,Math.PI*1/3,Math.PI,false)
        c.fill()     //填充
        c.stroke();  //描边

c.closePath() //从终点到起点封闭起来

在这里插入图片描述

画扇面

可以画两个扇形嵌套，其中小的扇形的底色和画布一样，这样就可以实现画扇面。
closePath()从尾部链接到首部
在这里插入图片描述

        c.beginPath();
        c.lineWidth=5
        c.fillStyle="blue"
        c.moveTo(200,200)
        c.arc(200,200,150,Math.PI*1.1,Math.PI*1.9,false)
        c.closePath()
        c.fill()     //填充
        
        c.beginPath();
        c.lineWidth=0;
        c.fillStyle="antiquewhite"
        c.moveTo(200,200)
        c.arc(200,200,60,Math.PI*1.1,Math.PI*1.9,false)
        c.fill()     //填充

绘制文字

描边空心文字：strokeText(“文字”，x，y，maxWidth)
实心文字：fillText(“文字”，x，y，maxWidth)
字体样式：font=“大小字体”（注意无逗号）

给元素设置一样的坐标和文字，便可以得到带有描边的实心文字
在这里插入图片描述

        c.beginPath()
        c.lineWidth=8
        c.strokeStyle="pink"
        c.fillStyle="red"
        c.font="50px 隶书"
        c.strokeText("canvas元素111",100,100)
        c.fillText("canvas元素111",100,100)
        c.fill()
        c.stroke()

渐变色

createLinearGradient线性渐变
createRadialGradient放射性渐变

属性

（x1,y1,x1,y2）渐变的起始坐标和终点坐标
addColorStop（位置，“颜色值”）0表示起点，1表示终点

线性渐变

在这里插入图片描述

        c.beginPath()
        g=c.createLinearGradient(50,50,50,300)
        g.addColorStop(0,"green")
        g.addColorStop(0.8,"red")
        g.addColorStop(1,"pink")
        c.fillStyle=g;
        c.fillRect(50,50,300,300)//画一个矩形
        c.stroke()
        c.fill()

放射性渐变

（x1,y1,r1,x2,y2,r2）
在这里插入图片描述

        c.beginPath()
        c.moveTo(400,300)
        g=c.createRadialGradient(400,300,10,400,300,200)
        g.addColorStop(0,"green")
        g.addColorStop(0.8,"red")
        g.addColorStop(1,"pink")
        c.fillStyle=g;
        c.arc(400,300,200,Math.PI*3/2,Math.PI*2,false)//画一个圆
        c.closePath()  //从终点链接到起点
        c.fill()