canvas基础绘画

Posted 2022-10-30 tqzuy

tags:

篇首语：本文由小常识网(cha138.com)小编为大家整理，主要介绍了canvas基础绘画相关的知识，希望对你有一定的参考价值。

<!DOCTYPE html>
<html>
<head lang="en">
<meta charset="UTF-8">
<title></title>
</head>
<body>
<div style="height: 100px"></div>
<div style="text-align: center">
<canvas id="myCanvas" style="border: 1px solid gray;background-color: lightblue" width="600" height="400">
</canvas>
</div>

<div>
<input type="button" value="绘制文字" οnclick="wenzi()"/>
<input type="button" value="绘制空心文字" οnclick="wenzi2()"/>
<input type="button" value="绘制矩形" οnclick="juxing()"/>
<input type="button" value="绘制实心矩形" οnclick="juxing2()"/>
</div>
<div>
<input type="button" value="清空矩形区域" οnclick="closees()"/>
<input type="button" value="画图片" οnclick="tupian()"/>
<input type="button" value="画图片2" οnclick="tupian2()"/>
</div>
<div>
<input type="button" value="画路径2" οnclick="lujing2()"/>
<input type="button" value="画路径" οnclick="lujing()"/>
<input type="button" value="画贝塞尔曲线路径" οnclick="lujing3()"/>
<input type="button" value="画扇形" οnclick="lujing4()"/>
</div>
<script>
var c=document.getElementById("myCanvas");
var cxt=c.getContext("2d");
var img=document.getElementById("img1");
function lujing4()
// 画扇形，参数共计6个，至少需要5个
// 1---圆心坐标X 2----圆心坐标Y
// 3---半径长度，单位像素
// 4----开始角度，5----结束角度
// 6----是否为顺时针绘制，默认值false，为顺时针
cxt.arc(200,200,100,0, Math.PI);
cxt.stroke();

function lujing3()
cxt.moveTo(20,20);
cxt.quadraticCurveTo(10,50,100,50);
cxt.stroke();

function lujing2()
// 有了beginPath和closePath之后，绘制的路径线条最后会自动闭合（从结束的坐标绘制一条路径到开始的坐标点）
// beginPath和closePath必须成对出现
cxt.beginPath();
cxt.moveTo(100,100);
cxt.lineTo(150,150);
cxt.lineTo(50,200);
cxt.closePath();
cxt.stroke();

function lujing()
// moveTo 将画笔的指定到界面的某一个坐标点
cxt.moveTo(100,350);
cxt.moveTo(350,350);
// lineTo 从上一个坐标点跳到下一个坐标点并绘制2点之间的路径
// 如果没有初始化坐标点，那么lineTo等同于moveTo
cxt.lineTo(50,50);
cxt.lineTo(40,40);
// stroke是将内存中的运行结果真正的绘制到界面
cxt.stroke();

function tupian2()
cxt.drawImage(img,0,0,100,200,300,100,200,300)

function tupian()
cxt.drawImage(img,0,0,200,200)

function closees()
cxt.clearRect()

function juxing2()
cxt.fillRect(210,100,210,100);
cxt.fillStyle="orangered";
cxt.fillRect(205,95,210,100);

function juxing()
cxt.strokeRect(210,100,210,100)

function wenzi2()
cxt.font='36px 楷体';
cxt.fillStyle="blue";
cxt.strokeText("PG32--唐漆",40,340)

function wenzi()
//fillText函数，功能是绘制文字内容在画布中
// 参数总计有4个 1----将要绘制出了的文字
// 2------绘制的X坐标点 3------绘制的Y坐标点
// 4------文字内容显示的最大宽度，避免文字溢出或者叫超出可以控制的范围
// 坐标点的位置默认在第一个文字的左下角1
cxt.font='36px 楷体';
cxt.fillStyle="blue";
cxt.fillText("PG32--唐漆",40,80)

</script>

</body>
</html>

以上是关于canvas基础绘画的主要内容，如果未能解决你的问题，请参考以下文章