客服电话
APP下载
迪恩网络APP
随时随地掌握行业动态
官方微信
扫描二维码
关注迪恩网络微信公众号
一、JavaScript使用html中的画布1、画布：页面中用于绘制图形的特殊区域 <canvas id="id" width="宽度" height="高度"> </canvas> (2)JavaScript中获取画布
document.getElementById('id')
(3)准备画笔：context对象(画笔)，也称为绘制环境，使用该对象在画布中绘制图形
getContext('2d')
3、绘图
E、线的路径：在同一个画布中添加再多的连线端点路径只有一条 ontext.strokeStyle = 'red' //描边的颜色 context.moveTo(10,10); //起始位置 context.lineTo(10,100);//连线端点(竖线) context.lineTo(100,100);//连线端点(横线) context.closePath();//闭合路径 context.stroke();//描边 context.fill(); //填充 (2)绘制圆：arc(x,y,r,开始角,结束角,方向)
var canvas = document.getElementById('cavs');
var context = canvas.getContext('2d');
context.arc(150,80,50,0,2.0*Math.PI)
context.stroke()
二、页面存储技术会话跟踪技术,http协议是一个无状态协议,服务器端要确定发送请求的客户端必须使用会话跟踪技术 示例：使用画布绘制火柴人
<body>
<canvas id="cas" width="1000" height="1000"></canvas>
</body>
</html>
<script>
var cas=document.getElementById('cas');
var context=cas.getContext('2d');
//绘制头部
context.arc(400,100,30,0,2*Math.PI);
context.lineWidth='5';
context.stroke();
//绘制躯干
context.beginPath();
context.moveTo(400,130);
context.lineTo(400,140);
context.lineWidth='5';
context.stroke();
context.beginPath();
context.moveTo(400,140);
context.lineTo(400,260);
context.lineWidth='25';
context.stroke();
//绘制文件夹
context.beginPath();
context.moveTo(360,200);
context.lineTo(440,200);
context.lineTo(440,250);
context.lineTo(360,250);
context.closePath();
context.fillStyle='#fff';
context.fill();
context.lineWidth='2';
context.stroke();
//绘制手臂
context.beginPath();
context.moveTo(400,140);
context.lineTo(440,200);
context.lineTo(400,240);
context.lineWidth='10';
context.stroke();
context.beginPath();
context.arc(400,240,10,0,2*Math.PI);
context.fillStyle='#000';
context.fill();
//绘制腿部
context.beginPath();
context.moveTo(380,400);
context.lineTo(400,260);
context.lineTo(420,400);
context.lineTo(400,240);
context.lineWidth='10';
context.stroke();
context.beginPath();
context.arc(365,400,15,0,1*Math.PI,true);
context.closePath();
context.lineWidth='5';
context.stroke();
context.beginPath();
context.arc(405,400,15,0,1*Math.PI,true);
context.closePath();
context.lineWidth='5';
context.stroke();
</script>
效果如图：可以通过修改参数来画出自己喜欢的各种形状 到此这篇关于JavaScript中html画布的使用与页面存储技术的文章就介绍到这了,更多相关js html画布内容请搜索极客世界以前的文章或继续浏览下面的相关文章希望大家以后多多支持极客世界！ |
请发表评论