canvas基础练习(画线)

来源:互联网 发布:npm 网络性能管理 编辑:程序博客网 时间:2024/06/06 03:22
<!DOCTYPE html><html><head><meta charset="utf-8"><title>canvas</title><style>body{    background:#808080;}#canvas{    background:#FFFFFF;}</style><script>   window.onload = function(){       //获取canvas画布       var canvas = document.getElementById('canvas');       //获取2d绘图环境       cxt = canvas.getContext('2d');                //画直线(绘图路径)            //开始路径        cxt.beginPath();            //画端点        cxt.moveTo(100,100);        cxt.lineTo(200,200);        cxt.lineTo(300,200);            //闭合路径        cxt.closePath();            //画线        cxt.stroke();   }</script></head><body><canvas id="canvas" width="500" height="500"></canvas></body></html>


效果图:


0 0
原创粉丝点击