计算机系统应用教程网站

网站首页 > 技术文章 正文

Canvas绘图标签常见的图形绘制函数

btikc 2024-09-22 01:28:37 技术文章 22 ℃ 0 评论

1.1. Canvas介绍

Html5新增<canvas>标签来定义图形，比如图表和图像，您可以使用脚本(JS)来绘制图形。

<canvas> 标签只是图形容器，您必须使用(JavaScript)脚本来绘制图形。 简单理解：canvas标签可以在网页创建一个块矩形区域，我们可以通过JS代码在这个区域（画布）中绘制图形。

1.2. Canvas使用

下面代码在网页中创建了一个canvas标签，画布宽高为600px,400px。注意canvas不能使用style属性设置宽高，style设置的只是canvas标签的大小，而非画布本身的大小。

<canvas id="myCanvas" width="600px" height="400px">

你的浏览器不支持Canvas，请更新你的浏览器。

</canvas>

默认情况下这个画布里面什么东西都没有，我们可以给canvas设置一个边框，便于我们查看。

<canvas id="myCanvas" width="600px" height="400px" style="border:1px solid red">

你的浏览器不支持Canvas，请更新你的浏览器。

</canvas>

Canvas标签添加到页面中画布里面没有任何东西，相当于我们准备好了一张白纸。

1.3. 绘制图形

Canvas标签本身并不能绘制图形，绘制图片的工作需要使用 JavaScript来完成。

所以我们需要获取canvas对象，然后通过这个对象上面的方法完成绘制:

<script type="text/javascript">

window.onload = function(){

//获取canvas标签对象

var myCanvas = document.getElementById("myCanvas");

//获取绘制的上下文对象。

var cx = myCanvas.getContext("2d");

//...绘制代码

}

</script>

1.3.1. 绘制直线

cx.strokeStyle="red";//画笔的颜色

cx.lineWidth=2;//线框

cx.moveTo(500,500); //设置线条的起始位置

cx.lineTo(100, 100); //给路径一个终点

cx.stroke();//开始绘制

1.3.2. 绘制矩形

cx.fillStyle = "blue"; //填充色为蓝色

cx.strokeStyle ="red"; //描边为红色

cx.lineWidth = 2;

cx.fillRect(10, 10, 400, 400); //绘制矩形 fillRect(起点x,起点y,宽度w,高度h);

cx.strokeRect(10, 10, 400, 400); //绘制边框 strokeRect(x,y,w,h);

1.3.3. 绘制圆形

cx.fillStyle = "blue"; //填充色为蓝色

cx.strokeStyle = "red"; //描边为红色

cx.lineWidth = 2;

//绘制圆形 arc(原点x,原点y,半径,起始弧度,结束的弧度,是否是逆时针)

cx.arc(200, 200, 150, 0, Math.PI*2, true); // π

cx.fill(); //填充颜色

cx.stroke(); //绘制

//清除画图

cx.clearRct(x,y,width,height);

1.3.4 加载图片素材

//加载图片

var bb=document.querySelector("#bb");

//用法一:

// cx.drawImage(bb,50,50)//把画加载到画布指定的位置

//用法二：

cx.drawImage(bb,50,50,120,150);//把画加载到画布指定的位置,并制定宽高

//用法三：

//cx.drawImage(img,sx,sy,swidth,sheight,x,y,width,height);

//cx.drawImage(bb,0,280,590,400,150,600,150,150)

小练习：

<!DOCTYPE html>

<html>

<head>

<meta charset="UTF-8">

<title></title>

<style type="text/css">

body{

background: #ccc;

}

#mycanvas{

background: #fff;

display: block;

margin: auto;

}

#bb{

display: none;

}

</style>

<script type="text/javascript">

window.onload=function(){

//获取画布

var mycanvas=document.querySelector("#mycanvas");

//设置画笔

var pen=mycanvas.getContext("2d");

//画一条直线

//确定一个起点

pen.moveTo(0,0)

//终点

pen.lineTo(300,300);

pen.lineTo(300,500);

pen.lineTo(0,0);

//设置线条的样式

pen.strokeStyle="rgb(255,255,0)";//颜色

pen.lineWidth="5";//宽度

//开始画图

pen.stroke();

//从新开启绘画

pen.beginPath();

//设置线条的样式

pen.strokeStyle="rgb(0,255,0)";//颜色

pen.lineWidth="3";//宽度

pen.moveTo(400,100);

pen.lineTo(400,500);

pen.stroke();

//画矩形

pen.strokeStyle="rgb(0,255,255)";//颜色

pen.lineWidth="10";//宽度

//用线条画矩形

pen.strokeRect(100,200,200,50);

pen.strokeRect(300,50,200,50);

//颜色填充

pen.fillStyle="yellow";

pen.fillRect(100,400,100,50);

pen.strokeRect(100,400,100,50);

//画圆

pen.beginPath();

pen.strokeStyle="yellow";

pen.fillStyle="red";

pen.lineWidth="18";

pen.arc(300,600,150,0,Math.PI*2,true);

pen.stroke();//用线条画圆

pen.fill();//用填充色画圆

//加载图片

var bb=document.querySelector("#bb");

//用法一:

// pen.drawImage(bb,50,50)//把画加载到画布指定的位置

//用法二：

pen.drawImage(bb,50,50,120,150);//把画加载到画布指定的位置,并制定宽高

//用法三：

//context.drawImage(img,sx,sy,swidth,sheight,x,y,width,height);

//pen.drawImage(bb,0,280,590,400,150,600,150,150)

}

</script>

</head>

<body>

<canvas width="600" height="800" id="mycanvas">

</canvas>

<img src="bb.jpeg" id="bb"/>

</body>

</html>

效果：

Tags：

猜你喜欢

本文暂时没有评论，来添加一个吧(●'◡'●)

欢迎 你 发表评论:

最近发表
标签列表