复制代码
代码如下:
<!DOCTY PE ht ML P ub LIC "-//W3C//DTD XHTML 1.0 Trans IT ional//EN" "http://HdhCmsTestw3. org /TR/xhtml1/DTD/xhtml1 -t ransitional.dtd">
<html XM lns="http://HdhCmsTestw3.org/1999/xhtml">
<head>
< ;m eta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>index_t hr ee</title>
<link href="css/style.css" rel="stylesheet" type="text/css"/>
<script type="text/javascript" src="js/ jq uery-1.9.1.min.js"></script>
<script type="text/javascript" src="js/index.js"/></script>
<body >
<!-- 添加canvas标签，并加上 红色 边框以便于在页面上查看 -->
<canvas id="myCanvas" width="400px" h ei ght="300px" style="border: 1px solid red ;">
您的浏览器不支持canvas标签。
</canvas>
<script type="text/javascript">
//获取Canvas对象( 画布 )
VAR canvas = document.getElementById("myCanvas");
// 简单 地检测当前浏览器 是否 支持Canvas对象，以免在一些不支持html5的浏览器中提示语法错误
if(canvas.getContext){
//获取对应的CanvasRenderingContext2D对象( 画笔 )
var ctx = canvas.getContext("2d");
//线条的颜色
ctx. stroke Style=" # FF9933";
//线条的 宽 度像素
ctx.lineWidth=10;
//线条的两关形状
ctx.lineCap="round";
//注意，Canvas的坐标系是：Canvas画布的左上角为原点(0,0)，向右为横坐标，向下为纵坐标，单位是像素(px)。
// 开始 一个新的 绘制 路径
ctx.be gin Path();
//定义直线的起点坐标为(10,10)
ctx.moveTo(50, 50);
//定义直线的终点坐标为(50,10)
ctx.l inet o(350, 250);
ctx.moveTo(50, 240);
ctx.lineTo( 360 , 60);
ctx.moveTo(50, 200);
ctx.lineTo(300, 40);
//沿着坐标点顺序的路径绘制直线
ctx.stroke();
//关闭当前的绘制路径
ctx.closePath();
}
</script>
</body>
</html>
总结
以上是 为你收集整理的 Html5新特性用canvas标签画多条直线附效果截图 全部内容，希望文章能够帮你解决 Html5新特性用canvas标签画多条直线附效果截图 所遇到的问题。
如果觉得 网站内容还不错， 推荐好友。
查看更多关于Html5新特性用canvas标签画多条直线附效果截图的详细内容...