HTML5绘图工具canvas元素实例代码

来源：互联网发布：mysql安装教程图解编辑：程序博客网时间：2024/05/20 01:36

我们新建一个html文件即可，因为html5的支持来自浏览器，和html文件的版本关系不大，只要浏览器支持HTML5即可。名字：HTML5_canvas.html

效果图：

源代码：

<!DOCTYPE html><html><head>    <title>HTML5_canvas.html</title>    <meta http-equiv="keywords" content="keyword1,keyword2,keyword3">    <meta http-equiv="description" content="this is my page">    <meta http-equiv="content-type" content="text/html; charset=UTF-8"><script type="text/javascript"> //坐标定位function cnvs_getCoordinates(e){x=e.clientX;y=e.clientY;document.getElementById("xycoordinates").innerHTML="Coordinates: (" + x + "," + y + ")";} function cnvs_clearCoordinates(){document.getElementById("xycoordinates").innerHTML="";}</script></head>  <body onload="loadCanvas();" onmousemove="cnvs_getCoordinates(event)" onmouseout="cnvs_clearCoordinates()"><canvas id="myCanvas" width="800" height="500" style="border:1px solid #000000;">Your browser does not support the canvas element.</canvas><div id="xycoordinates"></div><script type="text/javascript">function loadCanvas(){    var c=document.getElementById("myCanvas");    var cxt=c.getContext("2d");    cxt.moveTo(75,10);    cxt.lineTo(150,50);    cxt.lineTo(0,50);    cxt.lineTo(75,10);        //绘制一个H字样    cxt.moveTo(200,100);    cxt.lineTo(210,100);    cxt.lineTo(210,400);    cxt.lineTo(200,400);    cxt.lineTo(200,100);        cxt.moveTo(210,230);    cxt.lineTo(280,230);    cxt.lineTo(280,240);    cxt.lineTo(210,240);        cxt.moveTo(280,100);    cxt.lineTo(290,100);    cxt.lineTo(290,400);    cxt.lineTo(280,400);    cxt.lineTo(280,100);        //绘制一个5字样    cxt.moveTo(350,100);    cxt.lineTo(500,100);    cxt.lineTo(500,110);    cxt.lineTo(350,110);    cxt.lineTo(350,100);        cxt.moveTo(350,110);    cxt.lineTo(350,240);    cxt.lineTo(360,240);    cxt.lineTo(360,110);    cxt.moveTo(360,230);    cxt.lineTo(500,230);    cxt.lineTo(500,240);    cxt.lineTo(360,240);        cxt.moveTo(500,240);    cxt.lineTo(500,400);    cxt.lineTo(490,400);    cxt.lineTo(490,240);        cxt.moveTo(490,400);    cxt.lineTo(350,400);    cxt.lineTo(350,390);    cxt.lineTo(490,390);        cxt.stroke();}</script></body></html>

0 0