html5直线,html怎么画直线

HTML5中canvas画布有些不理解，怎么画不出来一条直线？

小伙伴，你代码写错了撒，定义convas，但你用canvas.getcontext了。。。

HTML5中使用canvas绘制复杂图形

接下来，我们来看一下除了arc方法以外，其他使用路径绘制 图形 时会使用的方法。首先从绘制直线开始。

绘制直线一般会用到2个方法，分别是moveTo方法，lineTo方法

1. moveTo方法

moveTo方法的作用是将光标移动到指定的位置，绘制直线的时候以这个坐标为起点。使用如下：moveTo（x,y）;

该方法有2个参数，x指指定左标的横坐标，y指指定坐标的纵坐标。

2. lineTo方法

lineTo方法是指在moveTo方法指定直线的起点和指定直线终点之间绘制一条直线。使用如下：

lineTo（x,y）;

该方法的2个参数和moveTo方法的参数意义一样。使用该方法绘制完直线后，光标会自动移到lineTo指定的直线的终点。

因此，在创建路径时，需要使用moveTo方法将光标移动到指定的直线起点，使用lineTo方法在直线起点和直线终点之间创建路径，然后将光标移动到指定直线终点。

运行结果：

html5 canvas 画了一条直线，现在鼠标经过这条直线触发某一事件，如何确定鼠标经过这条直线呢？

这个玩意有点复杂。首先要获取点击发生鼠标所在的坐标。然后判断这个坐标是否在图形的范围内。如果在，刚可以视为点击了该图形。图形本身是不能响应事件的。必须用canvas代理。只是要判断的情况有时候很复杂。如果这个点所在的位置有多个图形。这就需要判断到底是具体的哪个。这就需要重绘图，绘一次判断一次。但这样就可能产生DOM的事件冒泡那样的情况。所以。。。要做好这个东西。面对的情况是相当复杂的。建议还是多找找资料。做做测试。

html5怎样实现直线动画效果

您好，希望以下回答能帮助您

对!html5 的动画效果 是用(js)jQuery+css3做的!html5绘图是用HTML5 Canvas 画图标签 加上API做的!

如您还有疑问可继续追问。

HTML5用哪个方法绘制

canvas绘图通过属于 canvas 的 JavaScript 方法完成

针对不支持html5的IE浏览器

!--[if IE]

script type="text/javascript" src="excanvas.js"/script

![endif]--

提示：canvas的绘图过程（即填充与描边）是非常消耗资源的，如果想节省系统资源提高效率，最好是绘制好所有路径，再一次性填充或描边图形。

canvas 方法

方法

用途

getContext(contextId)    公开在 canvas 上绘图需要的 API。惟一（当前）可用的 contextID 是 2d。  

height    设置 canvas 的高度。默认值是 150 像素。  

width    设置 canvas 的宽度。默认值是 300 像素。  

createLinearGradient(x1,y1,x2,y2)    创建一个线性渐变。起始坐标为 x1,y1，结束坐标为 x2,y2。  

createRadialGradient(x1,y1,r1,x2,y2,r2)    创建一个放射状渐变。圆圈的起始坐标是 x1,y1，半径为 r1。圆圈的结束坐标为 x2,y2，半径为 r2。  

addColorStop(offset, color)    向一个渐变添加一个颜色停止。颜色停止（color stop） 是渐变中颜色更改发生的位置。offset 必须介于 0 到 1 之间。  

fillStyle    设置用于填充一个区域的颜色 — 例如，fillStyle='rgb(255,0,0)'.  

strokeStyle    设置用于绘制一根直线的颜色 — 例如，strokeStyle='rgb(255,0,0)'.  

fillRect(x,y,w,h)    填充一个定位于 x 和 y，宽度和高度分别为 w 和 h 的矩形。  

strokeRect(x,y,w,h)    绘制一个定位于 x 和 y，宽度和高度分别为 w 和 h 的矩形的轮廓。  

moveTo(x,y)    将绘图位置移动到坐标 x,y。  

lineTo(x,y)    从绘图方法结束的最后位置到 x,y 绘制一条直线。  

1、绘制矩形：用到fillRect

!DOCTYPE htmlhtmlhead lang="en"

meta charset="UTF-8"

titlecanvas绘制图形/title/headbodycanvas id="myCanvas" width="500" height="500"/canvasscript type="text/javascript"

var canvas=document.getElementById("myCanvas");   //canvas 元素被设置为一个 JavaScript 变量

var myContext=canvas.getContext("2d");  //将getContext 应用到 canvas 元素    myContext.fillStyle="#ff0000";        //16进制设置填充颜色    myContext.fillRect(30,30,300,300);         //定义大小    myContext.fillStyle='rgb(0,255,0)';  //rgb设置填充颜色    myContext.fillRect(60,60,300,300);

myContext.fillStyle='rgba(255,0,0,0.5)';  //rgb+透明度设置填充颜色  myContext.fillRect(90,90,300,300);/script/body/html

2、线性渐变，用到createLinearGradient

!DOCTYPE htmlhtmlhead lang="en"

meta charset="UTF-8"

titlecanvas绘制图形/title/headbodycanvas id="myCanvas" width="500" height="500"/canvasscript type="text/javascript"

var myCanvas=document.getElementById("myCanvas");    var myContext=myCanvas.getContext('2d');    var myGradient=myContext.createLinearGradient(30,30,300,300);   //创建一个线性渐变    myGradient.addColorStop(0,"#ff0000");       //位置0和1之间，颜色值    myGradient.addColorStop(0.5,"#00FF00");

myGradient.addColorStop(1,"#ff00ff");

myContext.fillStyle=myGradient;             //用线性渐变填充    myContext.fillRect(0,0,400,400);/script/body/html

3、放射性渐变，用到createRadialGradient

!DOCTYPE htmlhtmlhead lang="en"

meta charset="UTF-8"

titlecanvas绘制图形/title/headbodycanvas id="myCanvas" width="500" height="500"/canvasscript type="text/javascript"var myCanvas=document.getElementById('myCanvas');    var myContext=myCanvas.getContext('2d');    var myGradient=myContext.createRadialGradient(300,300,0,300,300,400);  //6个参数    myGradient.addColorStop("0","#ff0000");

myGradient.addColorStop("1","#00ff00");

myContext.fillStyle=myGradient;

myContext.fillRect(0,0,300,300);/script/body/html

4、绘制矩形，与填充的不同，这个是描边效果

!DOCTYPE htmlhtmlhead lang="en"

meta charset="UTF-8"

titlecanvas绘制图形/title/headbodycanvas id="myCanvas" width="500" height="500"/canvasscript type="text/javascript"

var myCanvas=document.getElementById("myCanvas");    var myContext=myCanvas.getContext('2d');

myContext.strokeStyle="#ff0000";            //设置笔触纯色    myContext.strokeRect(0,0,100,100);/script/body/html

(当宽度为1px时，很明显的出现了模糊的现象，解决方法是数值都加上0.5，具体原因就自己百度下吧)

5、渐变笔触

!DOCTYPE htmlhtmlhead lang="en"

meta charset="UTF-8"

titlecanvas绘制图形/title/headbodycanvas id="myCanvas" width="500" height="500"/canvasscript type="text/javascript"

var myCanvas=document.getElementById("myCanvas");    var myContext=myCanvas.getContext('2d');    var myGradient=myContext.createLinearGradient(0,0,100,0);

myGradient.addColorStop(0,"#ff0000");

myGradient.addColorStop(1,'#0000ff');

myContext.strokeStyle=myGradient;            //设置渐变笔触    myContext.lineWidth=5;                         //描边宽度    myContext.strokeRect(0,0,100,100);/script/body/html

6、绘制圆，圆周长公式=2∏r

!DOCTYPE htmlhtmlhead lang="en"

meta charset="UTF-8"

titlecanvas绘制图形/title/headbodycanvas id="myCanvas" width="500" height="500"/canvasscript type="text/javascript"

var myCanvas=document.getElementById("myCanvas");    var myContext=myCanvas.getContext('2d');

myContext.beginPath();                      //开始一个新的绘制路径    myContext.arc(100,75,50,0,2*Math.PI);     //以坐标点(100,75)为圆心，起始角为0，绘制一个半径为50px的圆形    myContext.stroke();                         //按照指定的路径绘制弧线/script/body/html

7、绘制圆形

!DOCTYPE htmlhtmlhead lang="en"

meta charset="UTF-8"

titlecanvas绘制图形/title/headbodycanvas id="myCanvas" width="500" height="500"  style="margin:100px 0 0 100px;"/canvasscript type="text/javascript"

var myCanvas=document.getElementById("myCanvas");    var myContext=myCanvas.getContext('2d');

myContext.arc(100,100,50,0,2*Math.PI);

myContext.fillStyle="#ff0000";

myContext.fill();/script/body/html

8、绘制直线

!DOCTYPE htmlhtmlhead lang="en"

meta charset="UTF-8"

titlecanvas绘制图形/title/headbody style="padding:500px;"canvas id="myCanvas" width="500" height="500" /canvasscript type="text/javascript"

var myCanvas=document.getElementById("myCanvas");    var myContext=myCanvas.getContext('2d');

myContext.lineWidth=5;

myContext.moveTo(0,0);      //从坐标(0,0)到(200,0)    myContext.lineTo(200,0);

myContext.stroke();         //绘制已定义的路径/script/body/html

9、绘制曲线

!DOCTYPE htmlhtmlhead lang="en"

meta charset="UTF-8"

titlecanvas绘制图形/title/headbody style="padding:500px;"canvas id="myCanvas" width="500" height="500" /canvasscript type="text/javascript"

var myCanvas=document.getElementById("myCanvas");    var myContext=myCanvas.getContext('2d');

myContext.moveTo(20,20);

myContext.quadraticCurveTo(20,100,200,20);

myContext.stroke();/script/body/html