H5-使用canvas绘制

2021-11-27 247 0

canvas标签用于绘制图画,它是通过js来实现图画的绘制,这里将学习一下其基本用法。
首先,创建一个画布,这样我们就可以在上面进行创作了。

<!DOCTYPE html>
<html>
<head>
    <title>canvas</title>
</head>
<body>
    <canvas style="border:1px solid;"></canvas>
</body>
</html>

canvas默认会生成一个矩形,给其加上边框,方便我们进行查看效果。接下来使用js在上面添加线条,图形等图画。

线条

在这里,我们绘制一条宽度为10px的直线,坐标从(20,20)到(260,20),在浏览器上坐标的原点在左上角,往右为x轴,往左为y轴。直线的两端我们设置为圆形。

<script type="text/javascript">
    //获取对象
    var c=document.getElementById("myCanvas");
    //getContext() 方法返回一个用于在画布上绘图的环境。
    var ctx=c.getContext("2d");
    //设置线条的宽度
    ctx.lineWidth=10;
    //起始一条路径
    ctx.beginPath();
    //butt    默认,向线条的末端添加平直的边缘。round    向线条的每个末端添加圆形线帽。square    向线条的每个末端添加正方形线帽。
    // ctx.lineCap="square";
    // ctx.lineCap="butt";
    ctx.lineCap="round";
    //起点
    ctx.moveTo(20,20);
    //终点
    ctx.lineTo(260,20);
    //沿路径绘制
    ctx.stroke();
</script>

然后,我们来绘制一条折线,画一条有一个拐角的折线,我们可以想象一下我们用画笔是怎么画的,这里的绘制也是同样的画法,确定三个点,起点,转折点,终点,然后连接起来,就可以了。

<script>
    //折线
    var c=document.getElementById("myCanvas");
    var ctx=c.getContext("2d");
    ctx.beginPath();
    ctx.lineWidth=10;
    //转折处采用圆形
    ctx.lineJoin="round";
    ctx.moveTo(20,20);
    ctx.lineTo(100,50);
    ctx.lineTo(20,100);
    ctx.stroke();
</script>

矩形

绘制矩形也是很简单,首先确定矩形左上点坐标,然后给出矩形的宽和高就能绘制出来。

<script type="text/javascript">
    //矩形
    var c=document.getElementById("myCanvas");
    var ctx=c.getContext("2d");
    //颜色填充
    ctx.fillStyle="yellow";
    ctx.fillRect(20,20,150,100);
</script>

绘制一个颜色渐变的矩形。

<script type="text/javascript">
    //填充颜色渐变的矩形
    var c=document.getElementById("myCanvas");
    var ctx=c.getContext("2d");
    //4个参数分别是开始x坐标,y坐标,结束的x,y坐标
    var my_gradient=ctx.createLinearGradient(0,0,170,0);
    my_gradient.addColorStop(0,"black");
    my_gradient.addColorStop(0.5,"red");
    my_gradient.addColorStop(1,"white");
    ctx.fillStyle=my_gradient;
    ctx.fillRect(20,20,150,100);
</script>

绘制一个矩形框颜色渐变的矩形,官方叫法为笔触渐变的矩形。

<script type="text/javascript">
    //笔触颜色渐变的矩形
    var c=document.getElementById("myCanvas");
    var ctx=c.getContext("2d");
    //4个参数分别是开始x坐标,y坐标,结束的x,y坐标
    var my_gradient=ctx.createLinearGradient(0,0,170,0);
    my_gradient.addColorStop(0,"blue");
    my_gradient.addColorStop(0.5,"red");
    my_gradient.addColorStop(1,"green");
    //笔触样式
    ctx.strokeStyle=my_gradient;
    ctx.lineWidth=5;
    ctx.strokeRect(20,20,150,100);
</script>

绘制一个带阴影的矩形。

<script type="text/javascript">
    //带阴影的矩形
    var c=document.getElementById("myCanvas");
    var ctx=c.getContext("2d");
    //阴影级别
    ctx.shadowBlur=20;
    //阴影颜色
    ctx.shadowColor="black";
    //偏移位置
    ctx.shadowOffsetX=20;
    ctx.shadowOffsetY=20;
    ctx.fillStyle="blue";
    ctx.fillRect(20,20,150,100);
</script>

变化

这里来看一下矩形的放大效果和旋转效果。

<script type="text/javascript">
    //放大矩形
    var c=document.getElementById("myCanvas");
    var ctx=c.getContext("2d");
    ctx.strokeRect(20,20,50,30);
    ctx.ctx.scale(2,2);
    ctx.strokeRect(20,20,50,30);
</script>
<script type="text/javascript">
    //旋转矩形
    var c=document.getElementById("myCanvas");
    var ctx=c.getContext("2d");
    //弧度制
    ctx.rotate(20*Math.PI/180);
    ctx.strokeRect(20,20,50,30);
</script>

其中还有一些属性和方法这里就不一一介绍了,有兴趣或者又需要的小伙伴可以去查看相关的手册。想要实现更为厉害的效果,可以查看下面的文章。

10个会让你惊叹不已的HTML5画布(CANVAS)技术应用演示
http://www.uisdc.com/html5-canvas-demo-10

相关文章

H5-server-sent Event服务器发送事件
H5-本地数据库indexdb
H5-web sql数据库
H5-web存储
H5-视频和音频标签
h5-序

发布评论