<!DOCTYPE html> <html lang="en"> <head> <meta charset="utf-8"> <title></title> <link href="https://r01.uzaicdn.com/content/v1/styles/subject.css"> <link href="https://www.jb51.net/styles/lianxi.css"> <script src="https://r01.uzaicdn.com/content/v1/scripts/core.js"></script> <script src="https://www.jb51.net/scripts/lianxi.js"></script> <!--[if lt IE 9]><script src="https://r.uzaicdn.com/content/libs/html5shiv.js"></script><![endif]--> <!--[if IE 6]><script src="https://r.uzaicdn.com/content/libs/dd_belatedpng_0.0.8a-min.js" type="text/javascript"></script><script>DD_belatedPNG.fix('.png');</script><![endif]--> <style type="text/css"> canvas{border: 1px solid #000;display: block;margin: 0 auto;margin-top: 50px;} </style> <script> window.onload=function(){ function draw(){ var canvas = document.getElementById('canvas'); if (canvas.getContext){ var ctx = canvas.getContext('2d'); canvas.width=500; canvas.height=500; ctx.font = "48px serif"; ctx.strokeText("Hello world", 10, 50); }else{ alert('当前浏览器不支持，请更换浏览器'); } } draw(); } </script> </head> <body> <canvas>当前浏览器不支持，请更换浏览器</canvas> </body> </html>
7.图片操作
<!DOCTYPE html> <html lang="en"> <head> <meta charset="utf-8"> <title></title> <link href="https://r01.uzaicdn.com/content/v1/styles/subject.css"> <link href="https://www.jb51.net/styles/lianxi.css"> <script src="https://r01.uzaicdn.com/content/v1/scripts/core.js"></script> <script src="https://www.jb51.net/scripts/lianxi.js"></script> <!--[if lt IE 9]><script src="https://r.uzaicdn.com/content/libs/html5shiv.js"></script><![endif]--> <!--[if IE 6]><script src="https://r.uzaicdn.com/content/libs/dd_belatedpng_0.0.8a-min.js" type="text/javascript"></script><script>DD_belatedPNG.fix('.png');</script><![endif]--> <style type="text/css"> canvas{border: 1px solid #000;display: block;margin: 0 auto;margin-top: 50px;} </style> <script> window.onload=function(){ function draw(){ var canvas = document.getElementById('canvas'); if (canvas.getContext){ var ctx = canvas.getContext('2d'); canvas.width=500; canvas.height=500; var img=new Image(); img.src='http://gzdl.cooco.net.cn/files/down/test/imggzdl/312/15812.jpg' img.onload=function(){ ctx.drawImage(img,0,0); ctx.beginPath(); ctx.moveTo(30,96); ctx.lineTo(70,66); ctx.lineTo(103,76); ctx.lineTo(170,15); ctx.stroke(); } }else{ alert('当前浏览器不支持，请更换浏览器'); } } draw(); } </script> </head> <body> <canvas>当前浏览器不支持，请更换浏览器</canvas> </body> </html>