标签：style blog http java color os
检测浏览器支持情况
<script type="text/javascript"> try { document.createElement("Canvas").getContext("2d"); document.getElementById("support").innerHTML = "OK"; } catch (e) { document.getElementById("support").innerHTML = e.message; } </script>
加入Canvas
<canvas id="diagonal" style="border:1px solid blue;" width="200" height="200"/>
对角线
//取得Canvas元素及其绘图上下文
var canvas = document.getElementById("diagonal"); var context = canvas.getContext("2d"); //用绝对坐标来创建一条路径 context.beginPath(); context.moveTo(70, 140); context.lineTo(140, 70); //将这条线绘制到Canvas上 context.stroke();
变换
可以通过变换(缩放、平移、旋转)等达到和上面相同的效果。
用变换的方式绘制对角线
//取得Canvas元素及其绘图上下文 var canvas = document.getElementById("diagonal"); var context = canvas.getContext("2d"); //保存当前绘图状态 context.save(); //向右下方移动绘图上下文 context.translate(70, 140); //以原点为起点，绘制与前面相同的线段 context.beginPath(); context.moveTo(0, 0); context.lineTo(70, -70); context.stroke(); context.restore();
路径
HTML5 Canvas API中的路径代表你希望呈现的任何形状。
beginPath():不论开始绘制何种图形，第一个需要调用的就是beginPath。这个简单的函数不带任何参数，它用来通知canvas将要开始绘制一个新的图形了。
moveTo(x,y):不绘制，将当前位置移动到新的目标坐标(x,y)。
lineTo(x,y):不仅将当前位置移动到新的目标坐标(x,y)，而且在两个坐标之间画一条直线。
closePath():这个函数行为和lineTo很像，唯一的差别在于closePath会将路径的起始坐标自动作为目标坐标。它还会通知canvas当前绘制的图形已经闭合或者形成了完全封闭区域，这对将来的填充和描边都非常有用。
绘制一个松树地树冠
function createCanopyPath(context) { // Draw the tree canopy context.beginPath(); context.moveTo(-25, -50); context.lineTo(-10, -80); context.lineTo(-20, -80); context.lineTo(-5, -110); context.lineTo(-15, -110); // 树的顶点 context.lineTo(0, -140); context.lineTo(15, -110); context.lineTo(5, -110); context.lineTo(20, -80); context.lineTo(10, -80); context.lineTo(25, -50); // 连接起点，闭合路径 context.closePath(); } function drawTrails() { var canvas = document.getElementById(‘diagonal‘); var context = canvas.getContext(‘2d‘); context.save(); context.translate(130, 250); // 创建表现树冠的路径 createCanopyPath(context); // 绘制当前路径 context.stroke(); context.restore(); } window.addEventListener("load", drawTrails, true);
描边样式
通过描边模式，可以让树冠看起来更加真实。
//加宽线条 context.lineWidth = 4; //平滑路径的接合点 context.lineJoin = ‘round‘; //颜色 context.strokeStyle = ‘#663300‘; // 绘制当前路径 context.stroke();
填充样式
context.fillStyle = "#339900";
context.fill();
绘制矩形
我们给树增加树干
context.fillStyle = ‘#663300‘;
context.fillRect(-5, -50, 10, 50);
绘制曲线
context.save(); context.translate(-10, 350); context.beginPath(); // 第一条曲线向右上方弯曲 context.moveTo(0, 0); context.quadraticCurveTo(170, -50, 260, -190); // 向右下方弯曲 context.quadraticCurveTo(310, -250, 410, -250); // Draw the path in a wide brown stroke context.strokeStyle = ‘#663300‘; context.lineWidth = 20; context.stroke(); // Restore the previous canvas state context.restore();
HTML5程序设计 Canvas API,码迷,mamicode.com
标签：style blog http java color os
原文地址：http://www.cnblogs.com/luckyboy/p/3698771.html
