html5——canvas画直线

<html>
    <head>
        <title>canvas demo</title>
    </head>
    <body>
        <canvas id="mycanvas" width="500px" height="500px" ></canvas>
        <script type="text/javascript">
            var mycanvas = document.getElementById("mycanvas");
            var mycontext = mycanvas.getContext("2d"); 

            mycontext.beginPath();
            mycontext.strokeStyle = "red";
            mycontext.moveTo(70, 140);
            mycontext.lineTo(140, 70);
            mycontext.lineTo(300,200);
            mycontext.lineWidth="5";
            mycontext.stroke();

            mycontext.beginPath();
            mycontext.strokeStyle = "blue";
            mycontext.moveTo(200, 200);
            mycontext.lineTo(400, 500);
            mycontext.stroke();
        </script>
        <style>
            #mycanvas{
                border: solid 1px;
            }
        </style>

    </body>
</html>

效果图

beginPath()

刷新（开始）画图的开头

moveTo()

开始点

lineto()

记录点，可以多个

stroke()

绘制从beginPath()开始设置的定义图形

时间： 2024-10-13 06:18:17

html5——canvas画直线的相关文章

HTML5 Canvas 画钟表

画钟表是2D画图的老生常谈,我也不能免俗弄了一个.代码如下: <!DOCTYPE html> <html lang="utf-8"> <meta http-equiv="Content-Type" content="text/html; charset=utf-8"/> <head> <title>钟表</title> </head> <body onloa

html5 canvas画饼

1. [图片] lxdpie.jpg ?2. [文件] lqdpie.html ~ 801B 下载(7) <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd"><html lang="ru"><head> <title></title> <met

html5 canvas画五角星（美国队长）

画一波五角星: 美国队长图标原理: (1)根据五角星的顶点,外顶点5个,内顶点5个,分成内外圆 (2)由三角函数可表示出每个顶点的位置 (3)利用canvas的lineTo()接口画图上代码: 1 <!DOCTYPE html> 2 <html lang="en"> 3 4 <head> 5 <meta charset="UTF-8"> 6 <title>Captain America</tit

html5 canvas 画hello ketty

<!DOCTYPE html> <html lang="zh-CN"> <head> <meta charset="utf-8"> <title>Html5 - 小猫咪</title> <link rel="stylesheet" type="text/css" href="css/common/reset.css"/> &

Html5 canvas 画带箭头的线

var canvas=document.getElementById("canvas"); var context=canvas.getContext("2d"); function Line(x1,y1,x2,y2){ this.x1=x1; this.y1=y1; this.x2=x2; this.y2=y2; }

html5 canvas 画时钟

<!DOCTYPE HTML> <html> <body> <canvas id="myCanvas" width="400" height="400" style="border:1px solid"></canvas> <script type="text/javascript"> // get the canvas

使用html5 Canvas绘制直线所需的CanvasRenderingContext2D对象的主要属性和方法(有"()"者为方法)如下: 属性或方法基本描述 strokeStyle 用于设置画笔绘制路径的颜色.渐变和模式.该属性的值可以是一个表示css颜色值的字符串.如果你的绘制需求比较复杂,该属性的值还可以是一个CanvasGradient对象或者CanvasPattern对象 globalAlpha 定义绘制内容的透明度,取值在0.0(完全透明)和1.0(完全不透明)之间,默认

html5 canvas绘制圆形印章，以及与页面交互

1 <!DOCTYPE html> 2 <html> 3 <head> 4 <meta charset="UTF-8"> 5 <title>HTML5 Canvas画印章</title> 6 <script type="text/javascript" src="../JQmain/jquery-2.2.0.min.js"></script> 7 &l

Html5新特性 <canvas>画板画直线

下面例子为用canvas标签画多条直线 <!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 ht