H5 canvas 简单学习

最新推荐文章于 2025-03-20 10:11:56 发布

xinxiaoyong

最新推荐文章于 2025-03-20 10:11:56 发布

阅读量844

点赞数 2

分类专栏： H5 canvas 文章标签： H5 canvas H5画布学习 H5贝塞尔曲线 canvas API 学习 H5 canvas 二次贝塞尔曲线三次贝塞尔曲线

本文链接：https://blog.youkuaiyun.com/xinxiaoyonng/article/details/79250731

版权

H5 canvas 专栏收录该内容

1 篇文章

订阅专栏

先看效果图：

下图为直线，矩形，圆形，三角形部分；当点击清除后，消失。

下图为二次方贝塞尔，三次方贝塞尔曲线图部分；

最终效果描述：

1.绘制直线；

2.绘制矩形；

3.绘制圆形；

4.绘制实心三角形和空心三角形

5.清除当前画布内容；

6.绘制二次方贝塞尔曲线及控制线；

7.绘制三次方贝塞尔曲线及控制线；

====================================================

一、上述效果代码开发，代码如下，

1.图片快速浏览

2.代码详情

<!doctype html>

<html lang="en">

<head>

<meta charset="UTF-8">

<title>H5-canvas</title>
<style>
/* 定义id为myCanvas画布的样式，便于观看 */
#myCanvas{
width:500px;
height:400px;
background:green;
}
</style>
</head>
<body>

<canvas id="myCanvas"></canvas>

<input type="button" value="画完后清空画布" id="eraser">
<script>
//准备阶段2-找到画布元素
var C=document.getElementById("myCanvas");
var E=document.getElementById("eraser");
//判断当前浏览器是否支持canvas
if(C.getContext){
alert("Yes,支持canvas");
}else{
alert("No,不支持canvas");
}
//准备阶段3-定义2d类型环境/二维画笔,有了画板，还得为该画板专门定制一个公用画笔。用该画笔画出直线/矩形/圆形...
var context=C.getContext("2d");

//1绘制直线:两点确定一条直线，起始点-->结束点。
//定义直线新的子路径并定义起始点:(x,y)=(0,0)原点。
context.moveTo(0,0);
//定义该直线结束点
context.lineTo(200,100);
//沿该路径绘制该直线
context.stroke();

//2.绘制矩形:四个点确定一个矩形，上-->右-->下-->左。fill:填充区域的颜色;stroke:轮廓颜色;
//定义矩形填充颜色
context.fillStyle="#FF00FF";
//定义了矩形的坐标值(50,50)，宽100px,高50px
context.fillRect(50,50,100,50);
//定义一个蓝色轮廓
context.strokeStyle="blue";
//定义了矩形的坐标值(70,70)，宽40px,高10px
context.strokeRect(70,70,40,10);

//3.绘制圆形:圆心,半径，弧度确定一个圆;
//定义圆形的填充颜色,如不定义默认值为上一个context.fillStyle的值,会覆盖。
context.fillStyle="orange";
//开始绘制路径
context.beginPath();
//画一个圆形arc,起点坐标值(100,80),半径值为40,起始角度为值为0,结束角度值为Math.PI*2,绘制方向true为顺时针方向绘制。
//Math.PI*2:代表整圆;
context.arc(100,80,40,0,Math.PI*2,true);
//绘制结束路径-闭合
context.closePath();
//输出填充颜色,没有输出颜色,将看不见绘制的圆，不便于查看。
context.fill();

//4.绘制三角形:三点确定一个三角形；
//fill:有填充色的实心三角形
context.fillStyle="yellow";
//定义起始点(x,y)=(15,15);
context.moveTo(15,15);
//定义第二点与第一点构成横向短直角边,
context.lineTo(100,15);
//定义第三点，形成闭合图形;
context.lineTo(15,100);
//输出填充色为黄色的三角形
context.fill();

//stroke:仅有轮廓的空心三角形
context.strokeStyle="#000";
//定义起始路径
context.beginPath();
//定义起始点(x,y)=(60,60);
context.moveTo(60,60);
//定义第二点与第一点构成横向短直角边,
context.lineTo(100,60);
//定义第三点，
context.lineTo(60,100);
//结束路径,形成闭合图形;
context.closePath();
//沿该路径绘制图形,输出一个黑色轮廓无填充的三角形
context.stroke();

//画了这么多简单测试图形，现在要擦干净画布准备绘制 "贝塞尔曲线"。
//通过一个点击事件,完成清除动作
E.οnclick=function(){
//从画布起点(0,0)处开始，水平清除C.width=500px,垂直清除C.height=400px里的内容。
context.clearRect(0,0,C.width,C.height);
//5.贝塞尔曲线：二次方曲线和三次方曲线;
//5.1绘制二次方贝塞尔曲线
//定义贝塞尔曲线轮廓颜色
context.strokeStyle="pink";
//定义起始路径
context.beginPath();
//定义起始点坐标(10,100)
context.moveTo(10,100);
//定义控制点(cplx,cply)=(70,50),终点坐标(300,200);quadraticCurveTo(cplx,cply,x,y) 用来绘制二次方贝塞尔曲线
context.quadraticCurveTo(75,50,300,200);
//沿该路径绘制二次方贝塞尔曲线
context.stroke();
//表示绘制的图形将画在现有画布之上。
context.globalCompositeOperation="source-over";
//下面绘制该曲线的控制点和控制线,控制点坐标:两直线的交点(cplx,cply);
context.strokeStyle="red";
context.beginPath();
//定义控制点坐标
context.moveTo(75,50);
//控制线1:(10,200)-->(75,50)
context.lineTo(10,100);
//定义控制点坐标
context.moveTo(75,50);
//控制线2:(75,50)-->(300,200)
context.lineTo(300,200);
//沿该路径绘制该控制线
context.stroke();

//5.2绘制三次方贝塞尔曲线
context.strokeStyle="blue";
context.beginPath();
//定义起始点坐标(10,80)
context.moveTo(10,80);
//定义控制点1(cplx,cply)=(25,50),定义控制点2(cp2x,cp2y)=(55,50),终点坐标(300,200);
//bezierCurveTo(cplx,cply,cp2x,cp2y,x,y) 用来绘制三次方贝塞尔曲线
context.bezierCurveTo(25,50,55,50,300,200);
context.stroke();
context.globalCompositeOperation="source-over";
//下面绘制该曲线的控制点和控制线,控制点坐标:两直线的交点(cplx,cply)和(cp2x,cp2y);
context.strokeStyle="#000";
context.beginPath();
//定义控制点1坐标(cplx,cply)=(25,50)
context.moveTo(25,50);
//控制线1,(25,50)-->(10,80)
context.lineTo(10,80);
//定义控制点2坐标(cp2x,cp2y)=(55,50)
context.moveTo(55,50);
//控制线1,(75,50)-->(300,200)
context.lineTo(300,200);
context.stroke();
};
</script>
</body>
</html>