详解html5 Canvas drawing的示例代码 (一)

百变鹏仔 2个月前 (10-18) #H5教程

文章标签示例

只有对基础二维图形的绘画（drawing）、着色(coloring)、变换（transforming）有较强基础，才能更加有效的利用canvas；

下面，我就简单了解一下，canvas是如何绘画基本shape的（矩形、直线、圆弧、贝赛尔曲线）等；

先贴一个以下所有涉及到的实现运行的基本代码段：

Base code<!DOCTYPE html><html>    <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()替换掉即可！

Basic Rectangle Shape（矩形）

立即学习“前端免费学习笔记（深入）”；

在Canvas中，画矩形有三种方式：filling(), stroking(), or clearing

三种方式对应以下三种方法（参数都相同，分别是矩形的左上角的坐标[x,y]、矩形的宽度、矩形的高度）：

1. fillRect(x,y,width,height)：填充矩形区域；
2. strokeRect(x,y,width,height):画一个矩形边框；
3. clearRect(x,y,width,height):清除指定的矩形区域、使该区域变得透明；

Examplefunction drawScreen() {context.fillStyle = &#39;#000000&#39;;//填充颜色context.strokeStyle = &#39;#00ff00&#39;;//轮廓颜色context.lineWidth = 2;//线宽context.fillRect(10, 10, 40, 40);//填充矩形context.strokeRect(7, 7, 46, 46);//画矩形轮廓context.clearRect(20, 20, 20, 20);//清除矩形区域}

上一篇有提到Current state； 当我们在绘画时，我们可以利用所谓的绘画状态的堆栈， 对于canvas context在任何一个时间的数据的每一个状态都会存储； 下面是对于每一个状态，存储在堆栈中的一个数据列表； 变换矩阵（旋转、移动、缩放等）； 剪切区域； Canvas特征的当前值（部分）： — globalAlpha — globalCompositeOperation — strokeStyle — textAlign, textBaseline — lineCap, lineJoin, lineWidth, miterLimit — fillStyle — font — shadowBlur, shadowColor, shadowOffsetX, and shadowOffsetY在绘图环境中，正在操作的当前path and 当前位置并不是状态的一部分；Importmant!!!如何保存恢复当前的状态呢？ context.save()---push to stack; context.restore()---pop form stack;先有一个简单的印象，之后会更加详细的剖析；

Create Lines（直线）

利用path来创建线（line）

Path:用来画出一系列的相连的圆弧或者线条，可以称之为“轨迹”，使用它可以画出任意复杂的形状;

一个Canvas Context仅有一个current path ;

在调用context.save()时，current path并不做为当前的状态（current state）存储于stack中；

利用.beginPath()功能方法来启动一个Path；

利用.closePath()功能方法来关闭一个Path；

Example:画一条10px宽度的水平直线function drawScreen() {    context.strokeStyle = "#000000";//线的颜色                        context.lineWidth = 10;//线的宽度    context.beginPath();//启动path    context.moveTo(20, 20);    context.lineTo(100, 20);    context.stroke();//绘画    context.closePath();//关闭path}

线的属性：lineCap
直线lineCap属性：线帽，也就是线两端的样式，只有绘制较宽的线的，它才有效；

有三个有效值：butt\round\square

"butt":默认值,指定了线段应该没有线帽。

"round":线段应该带有一个半圆形的线帽，半圆的直径等于线段的宽度，并且线段在端点之外扩展了线段宽度的一半。

"square":线段应该带有一个矩形线帽。这个值和 "butt" 一样，但是线段扩展了自己的宽度的一半。

Examplefunction 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}

线的属性：lineJoin

lineJoin属性：表示两条线段如何连接；

当一个路径包含了线段或曲线相交的交点的时候，用lineJoin 属性来说明如何绘制这些交点；

该属性也有三个有效值：miter bevel round

"miter":默认值，两条线段的外边缘一直扩展到它们相交

"bevel":以一个斜边进行连接

"round":以一个圆弧边进行连接

    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();}

Arcs（圆弧）

一段圆弧可以是一个完整的圆也可以圆的一部分；

生成圆弧：context.arc()

context.arc(x, y, radius, startAngle, endAngle, anticlockwise)

参数依次代表圆心,半径、起始角度、终止角度、圆弧的方向；角度都是以弧度来表示；

anticlockwise为布尔类型 ;true为顺时针、false为逆时针

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();}

Bezier Curves（贝赛尔曲线）

Canvas支持二次 and 三次贝塞尔曲线的绘画

此处的贝塞尔曲线是定义在二维空间里的，需要一个起始点、一个终止点，再加上一个或者两个控制点来创建曲线；

控制点来决定所构造曲线的走向；

三次贝塞尔曲线需要两个点；

二次贝塞尔曲线需要一个点即可；

主要通过以下两个方法来绘画：

context.bezierCurveTo(cp1x, cp1y, cp2x, cp2y, x, y)

context.quadraticCurveTo(cpx, cpy, x, y)

二次贝塞尔曲线:function drawScreen(){context.strokeStyle = "black";context.lineWidth = 5;context.beginPath();context.moveTo(0, 0);context.quadraticCurveTo(500, 25, 0, 100);context.stroke();context.closePath();}曲线的起始点为（0，0），结束点为（0，100）点（500，25）控制最终生成曲线的走向；三次贝塞尔曲线： 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(); } 曲线的起点（0，0），结束点（150，300） （0, 125）, （300, 175）这两个为控制点； 大家可能自己运行一下代码，看看效果，此处就不贴图了。。

文章推荐

详解html5 Canvas drawing的示例代码 (一)

HTML在线编辑器的调用方法和使用方法

AlloyTouch全屏滚动插件 30秒搞定顺滑H5页

HTML5 js实现拖拉上传文件功能

Canvas and Drawables 翻译第一集

Canvas and Drawables 翻译第三集