如何利用dreamweaver简易画图

2025-10-06 19:27:07

1、新建一个HTML文档

2、简历一个canvas,可以理解为画布。

<canvas id="can

定义canvas属性,

<style type="text/css">

canvas{border:outset 2px #ccc}

</style>

3、接下来,就是画东西了,利用点能够很好地确定一个图像,

cans.moveTo(100,100);

cans.lineTo(50,150);

cans.lineTo(100,200);

cans.lineTo(150,150);

cans.closePath();

cans.moveTo(200,200);

cans.lineTo(150,250);

cans.lineTo(200,300);

cans.lineTo(250,250);

4、最后,就完成了。完整代码如下:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

<html xmlns="http://www.w3.org/1999/xhtml">

<head>

<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />

<title>无标题文档</title>

<style type="text/css">

canvas{border:outset 2px #ccc}

</style>

</head>

<body onload="unLoad()">

<script>

function unLoad(){

var cans=document.getElementById("can").getContext("2d")

cans.moveTo(100,100);

cans.lineTo(50,150);

cans.lineTo(100,200);

cans.lineTo(150,150);

cans.closePath();

cans.moveTo(200,200);

cans.lineTo(150,250);

cans.lineTo(200,300);

cans.lineTo(250,250);

cans.lineWidth=5;

cans.strokeStyle='green';

cans.stroke();

}

</script>

</body>

<canvas id="can

</html>

如何利用dreamweaver简易画图

声明:本网站引用、摘录或转载内容仅供网站访问者交流或参考,不代表本站立场,如存在版权或非法内容,请联系站长删除,联系邮箱:site.kefu@qq.com。
猜你喜欢