正在加载图片...
1、 Canvas基础知识 1.2绘图方法 案例1 <IDOCTYPE htmI> chtmllangen"xmlns=http://ww.w3.org/1999/xhtm1> Head> <meta charset"utf-8/> < title)第一个 Canvas图形/ title head》 <body> canvas id='demowidth300 height=200" style="border: lpx solid #CCCCcc:"></canvas> script typetext/ javascript> 获取 canvas元素对应的象 ar canvas document getElementById("demo) 获取在 canvas上给图的 canvasRenderingContext2象 var ctx canvas getcontext(2d") /设填充颜色 ctx fillstyle =#007ACC /给制矩形 /htm1>1、Canvas基础知识 1.2绘图方法 案例1： <!DOCTYPE html> <html lang="en" xmlns="http://www.w3.org/1999/xhtml"> <head> <meta charset="utf-8" /> <title>第一个Canvas图形</title> </head> <body> <canvas id="demo" width="300" height="200" style="border:1px solid #CCCCCC;"></canvas> <script type="text/javascript"> //获取canvas元素对应的DOM对象 var canvas = document.getElementById("demo"); //获取在canvas上绘图的canvasRenderingContext2D对象 var ctx = canvas.getContext("2d"); //设置填充颜色 ctx.fillStyle = '#007ACC'; //绘制矩形 ctx.fillRect(50, 50, 200, 100); </script> </body> </html>