`
rayln
  • 浏览: 433968 次
  • 性别: Icon_minigender_1
  • 来自: 上海
社区版块
存档分类
最新评论

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;
                }
                //取Canvas
var theCanvas = document.getElementById("canvasOne");
                //获取绘图环境context
var 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]、矩形的宽度、矩形的高度):
fillRect(x,y,width,height):填充矩形区域;
strokeRect(x,y,width,height):画一个矩形边框;
clearRect(x,y,width,height):清除指定的矩形区域、使该区域变得透明;
Example

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);//清除矩形区域
}


上一篇有提到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" 一样,但是线段扩展了自己的宽度的一半。
Example

function drawScreen() {
context.strokeStyle = "#000000";//线的颜色                    
context.lineWidth = 10;//线的宽度
context.lineCap="butt";//butt\round\square
context.beginPath();//启动path
context.moveTo(20, 20);
context.lineTo(100, 20);
context.stroke();//绘画
context.closePath();//关闭path
                    
context.lineCap="round";//butt\round\square
context.beginPath();//启动path
context.moveTo(20, 40);
context.lineTo(100, 40);
context.stroke();//绘画
context.closePath();//关闭path
                    
context.lineCap="square";//butt\round\square
context.beginPath();//启动path
context.moveTo(20, 60);
context.lineTo(100, 60);
context.stroke();//绘画
context.closePath();//关闭path
}


线的属性:lineJoin
lineJoin属性:表示两条线段如何连接;
当一个路径包含了线段或曲线相交的交点的时候,用lineJoin 属性来说明如何绘制这些交点;
该属性也有三个有效值:miter bevel round
"miter":默认值,两条线段的外边缘一直扩展到它们相交
"bevel":以一个斜边进行连接
"round":以一个圆弧边进行连接
Example

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


Arcs(圆弧)
一段圆弧可以是一个完整的圆也可以圆的一部分;
生成圆弧:context.arc()
context.arc(x, y, radius, startAngle, endAngle, anticlockwise)
参数依次代表圆心,半径、起始角度、终止角度、圆弧的方向; 角度都是以弧度来表示;
anticlockwise为布尔类型 ;true为顺时针、false为逆时针
Example

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)这两个为控制点;
大家可能自己运行一下代码,看看效果,此处就不贴图了。。

分享到:
评论

相关推荐

    基于net的超市管理系统源代码(完整前后端+sqlserver+说明文档+LW).zip

    功能说明: 环境说明: 开发软件:VS 2017 (版本2017以上即可,不能低于2017) 数据库:SqlServer2008r2(数据库版本无限制,都可以导入) 开发模式:mvc。。。

    LABVIEW程序实例-公式节点.zip

    labview程序代码参考学习使用,希望对你有所帮助。

    大米商城开源版damishop(适合外贸)

    大米外贸商城系统 简称damishop 完全开源版,只需做一种语言一键开启全球133中语言自动翻译功能,价格实现自动汇率转换,集成微信支付宝 paypal以及国外主流支付方式,自带文章博客系统。 软件架构 基于MVC+语言包模式,增加控制台,API导入产品方便对接其他系统(带json示例数据)。 使用要求 PHP7.4+ MYSQL5.6+ REDIS(可选) 安装方法 composer install 打开安装向导安装 http://您的域名/install 特色 1、缓存层增加时间与批量like删除 2、API产品导入方便对接其他系统 3、增加控制台命令行,命令行生成语言翻译包 4、后台一键开启自动翻译模式,支持全球133中语言,由于google代理翻译需要收费,这个功能需要付费。 5、可选购物车与ajax修改购物车产品 6、一键结算checkout 7、增加网站前台自定义路由 方便seo 更新日志 v3.9.7 集成鱼码支付接口,方便个人站长即使收款到账使用 v3.9.3 更新内容 1:增加ueditor与旧编辑器切换 2:增加可视化布局插

    LABVIEW程序实例-通过全局变量接收数据.zip

    labview程序代码参考学习使用,希望对你有所帮助。

    LABVIEW程序实例-日历控件.zip

    labview程序代码参考学习使用,希望对你有所帮助。

    毕设和企业适用springboot人工智能客服系统类及旅游规划平台源码+论文+视频.zip

    毕设和企业适用springboot人工智能客服系统类及旅游规划平台源码+论文+视频

Global site tag (gtag.js) - Google Analytics