码迷,mamicode.com
首页 > 其他好文 > 详细

canvas绘制直线和多边形基本操作

时间:2016-10-31 00:15:44      阅读:255      评论:0      收藏:0      [点我收藏+]

标签:tco   load   div   doctype   context   asc   sep   ddc   doc   

<!DOCTYPE HTML>
<html lang="en">
<body>
<canvas id="canvas" width="1024" height="768" style="border:1px solid #aaa;display:block;margin:0 auto;"> 
 您的浏览器不支持 canvas 标签.   
</canvas>    
<script type="text/javascript">
window.onload=function(){
 //var是定义一个变量   
var canvas=document.getElementById("canvas");//获取画布id为canvas;
canvas.width=1024;
canvas.height=768;//通过这两种方式也可以设置canvas的大小;
var context=canvas.getContext("2d");//获取绘图2D环境;
context.lineWidth=5;
context.beginPath();//开始绘图路径
context.moveTo(120,100);//起点坐标
context.lineTo(220,200);//中点坐标
context.closePath();//结束绘图路径
context.strokeStyle="red";//填充颜色为红色
context.stroke();//绘制线条调用出
context.beginPath();//开始绘图路径
context.moveTo(100,100);//起点坐标
context.lineTo(200,200);//中点坐标
context.lineTo(100,456);//终点坐标
context.lineTo(100,100);//终点坐标
context.closePath();//结束绘图路径
context.fillstyle="#eeddcc";
context.fill();//添充颜色调用出
context.strokeStyle="green";
context.stroke();
}
</script>
</body>
</html>

 

canvas绘制直线和多边形基本操作

标签:tco   load   div   doctype   context   asc   sep   ddc   doc   

原文地址:http://www.cnblogs.com/xiaoyumi666/p/6014440.html

(0)
(0)
   
举报
评论 一句话评论(0
登录后才能评论!
© 2014 mamicode.com 版权所有  联系我们:gaon5@hotmail.com
迷上了代码!