canvas是如何绘画基本shape的(矩形、直线、圆弧、贝赛尔曲线)
转载: http://www.cnblogs.com/amtf/archive/2012/01/12/2319680.html
只有对基础二维图形的绘画(drawing)、着色(coloring)、变换(transforming)有较强基础,才能更加有效的利用Canvas;
下面,我就简单了解一下,canvas是如何绘画基本shape的(矩形、直线、圆弧、贝赛尔曲线)等;
先贴一个以下所有涉及到的实现运行的基本代码段:
Base code
<!DOCTYPE html><html lang="en"> <head> <meta charset="utf-8" /> <script type="text/javascript" src="modernizr-latest.js"></script> <script type="text/javascript"> window.addEventListener("load", eventWindowLoaded, false); var Debugger = function() {}; Debugger.log = function(message) { try { console.log(message); } catch (exception) { return; } } function eventWindowLoaded() { canvasApp(); } function canvasSupport() { return Modernizr.canvas; } function canvasApp() { //是否支持CANVAS判断if(!canvasSupport()) { return; } //取Canvasvar theCanvas = document.getElementById("canvasOne"); //获取绘图环境contextvar context = theCanvas.getContext("2d"); //绘图方法的实现function drawScreen() {} //绘图方法调用执行 drawScreen(); } </script> </head> <body> <div style="position: absolute; top: 50px; left: 50px; border:1px solid #0000ff"> <canvas id="canvasOne" width="550" height="400"> Your browser does not support HTML5 Canvas. </canvas> </div> </body></html>
function drawScreen() {context.fillStyle = '#000000';//填充颜色context.strokeStyle = '#00ff00';//轮廓颜色context.lineWidth = 2;//线宽context.fillRect(10, 10, 40, 40);//填充矩形context.strokeRect(7, 7, 46, 46);//画矩形轮廓context.clearRect(20, 20, 20, 20);//清除矩形区域}
function drawScreen() { context.strokeStyle = "#000000";//线的颜色 context.lineWidth = 10;//线的宽度 context.beginPath();//启动path context.moveTo(20, 20); context.lineTo(100, 20); context.stroke();//绘画 context.closePath();//关闭path}
function drawScreen() {context.strokeStyle = "#000000";//线的颜色 context.lineWidth = 10;//线的宽度context.lineCap="butt";//butt\round\squarecontext.beginPath();//启动pathcontext.moveTo(20, 20);context.lineTo(100, 20);context.stroke();//绘画context.closePath();//关闭path context.lineCap="round";//butt\round\squarecontext.beginPath();//启动pathcontext.moveTo(20, 40);context.lineTo(100, 40);context.stroke();//绘画context.closePath();//关闭path context.lineCap="square";//butt\round\squarecontext.beginPath();//启动pathcontext.moveTo(20, 60);context.lineTo(100, 60);context.stroke();//绘画context.closePath();//关闭path}
Example function drawScreen() { context.strokeStyle = "#000000"; context.lineWidth = 10; context.lineJoin = "miter"; context.beginPath(); context.moveTo(20, 20); context.lineTo(100, 20); context.lineTo(100, 40); context.stroke(); context.closePath(); context.lineJoin = "bevel"; context.beginPath(); context.moveTo(20, 60); context.lineTo(100, 60); context.lineTo(100, 80); context.stroke(); context.closePath(); context.lineJoin = "round"; context.beginPath(); context.moveTo(20, 100); context.lineTo(100, 100); context.lineTo(100, 120); context.stroke(); context.closePath(); context.lineJoin = "miter"; context.beginPath(); context.moveTo(20, 140); context.lineTo(100, 140); context.lineTo(80, 180); context.stroke(); context.closePath();}
function drawScreen() {context.strokeStyle = "black";context.lineWidth = 5;context.beginPath();context.arc(100, 100, 20, (Math.PI / 180) * 0, (Math.PI / 180) * 360, false);context.stroke();context.closePath();context.beginPath();context.arc(100, 200, 20, (Math.PI / 180) * 0, (Math.PI / 180) * 90, false);context.stroke();context.closePath();context.beginPath();context.arc(100, 300, 20, (Math.PI / 180) * 0, (Math.PI / 180) * 90, true);context.stroke();context.closePath();}
function drawScreen(){context.strokeStyle = "black";context.lineWidth = 5;context.beginPath();context.moveTo(0, 0);context.quadraticCurveTo(500, 25, 0, 100);context.stroke();context.closePath();}
function drawScreen() { context.strokeStyle = "black"; context.lineWidth = 5; context.beginPath(); context.moveTo(0, 0); context.bezierCurveTo(0, 125, 300, 175, 150, 300); context.stroke(); context.closePath(); }