Html5 学习系列(五)Canvas绘图API快速入门(2)

Canvas绘图API Demos

上一篇文章中,笔者已经给大家演示了怎么快速用Canvas的API绘制一个矩形出来。接下里我会在本文中给各位介绍Canvas的其他API:绘制线条、绘制椭圆、绘制图片、图片处理等...如果想获得更好的阅读效果请点击老马的独立博客地址

一、Canvas绘制线条

    Context对象的beginPath方法表示开始绘制路径,moveTo(x, y)方法设置线段的起点,lineTo(x, y)方法设置线段的终点,stroke方法用来给透明的线段着色。moveto和lineto方法可以多次使用。最后,还可以使用closePath方法,自动绘制一条当前点到起点的直线,形成一个封闭图形,省却使用一次lineto方法。

        <body>
        <canvas id="demoCanvas" width="500" height="600">
        </canvas>
        <script type="text/javascript">
            //通过id获得当前的Canvas对象
            var canvasDom = document.getElementById("demoCanvas");
            //通过Canvas Dom对象获取Context的对象
            var context = canvasDom.getContext("2d");
            context.beginPath(); // 开始路径绘制
            context.moveTo(20, 20); // 设置路径起点,坐标为(20,20)
            context.lineTo(200, 200); // 绘制一条到(200,20)的直线
            context.lineTo(400, 20);
            context.closePath();
            context.lineWidth = 2.0; // 设置线宽
            context.strokeStyle = "#CC0000"; // 设置线的颜色
            context.stroke(); // 进行线的着色,这时整条线才变得可见
        </script>
        </body>

二、Canvas绘制文本

    Context上下文对象的fillText(string, x, y)方法是用来绘制文本,它的三个参数分别为文本内容、起点的x坐标、y坐标。使用之前,需用font设置字体、大小、样式(写法类似与CSS的font属性)。与此类似的还有strokeText方法,用来添加空心字。另外注意一点:fillText方法不支持文本断行,即所有文本出现在一行内。所以,如果要生成多行文本,只有调用多次fillText方法。

以下是代码Demo:

        <canvas id="demoCanvas" width="500" height="600"></canvas>
        <script type="text/javascript">
            //通过id获得当前的Canvas对象
            var canvasDom = document.getElementById("demoCanvas");
            //通过Canvas Dom对象获取Context的对象
            var context = canvasDom.getContext("2d");
            context.moveTo(200,200);
            
            // 设置字体
            context.font = "Bold 50px Arial";
            // 设置对齐方式
            context.textAlign = "left";
            // 设置填充颜色
            context.fillStyle = "#005600";
            // 设置字体内容,以及在画布上的位置
            context.fillText("老马!", 10, 50);
            // 绘制空心字
            context.strokeText("blog.itjeek.com!", 10, 100);
        </script>

三、Canvas绘制圆形和椭圆

    在上一篇文章中,笔者已经跟大家介绍过了绘制矩形,绘制其他形状,比如圆形等,都是一个思路,只不过是方法不同罢了。那接下里给各位演示一小绘制圆形和椭圆。Context上下文的arc方法就是绘制圆形或者椭圆,arc方法的x和y参数是圆心坐标,radius是半径,startAngle和endAngle则是扇形的起始角度和终止角度(以弧度表示),anticlockwise表示做图时应该逆时针画(true)还是顺时针画(false)。

以下是绘制图形的Demo:

        <canvas id="demoCanvas" width="500" height="600"></canvas>
        <script type="text/javascript">
            //通过id获得当前的Canvas对象
            var canvasDom = document.getElementById("demoCanvas");
            //通过Canvas Dom对象获取Context的对象
            var context = canvasDom.getContext("2d");
            context.beginPath();//开始绘制路径
            //绘制以 (60,60)为圆心,50为半径长度,从0度到360度(PI是180度),最后一个参数代表顺时针旋转。
            context.arc(60, 60, 50, 0, Math.PI * 2, true);
            context.lineWidth = 2.0;//线的宽度
            context.strokeStyle = "#000";//线的样式
            context.stroke();//绘制空心的,当然如果使用fill那就是填充了。
        </script>

还不赶快动手试一下?

四、Canvas绘制图片

    Canvas绘制图片应该是他的一大特点或者是亮点吧。当然配合File的API,让JS变得无可匹敌。那接下里给大家演示一下怎样绘制图片,并且做出一个立体效果出来。

以下是绘制图片的Demo:

    <canvas id="demoCanvas" width="500" height="600"></canvas>
    <script type="text/javascript">
        //通过id获得当前的Canvas对象
        var canvasDom = document.getElementById("demoCanvas");
        //通过Canvas Dom对象获取Context的对象
        var context = canvasDom.getContext("2d");
        var image = new Image();//创建一张图片
        image.src = "Images/a.png";//设置图片的路径
        image.onload = function() {//当图片加载完成后
            for (var i = 0; i < 10; i++) {//输出10张照片
                //参数:(1)绘制的图片  (2)坐标x,(3)坐标y
                context.drawImage(image, 100 + i * 80, 100 + i * 80);
            }
        };
    </script>

还不赶快动手试一下?

五、总结

Canvas总算介绍了最基本的用法了。当然本文大量借鉴了其他网站的例子。作者也是把最基本的精华部分罗列了一下。总体来说Canvas绘制图片和文本、形状都不是很难,API代码上手难度基本就是初级。但是由此而带来的非常多的可能,让Html5真正的强大到无可比拟的地步。

当然本文并没有涉及到Canvas3D绘制的相关内容,而且关于Canvas绘制渐变色、绘制阴影、图片的相关处理操作等,这些内容,如果读者确实需要的可以自行搜索查找相关资料或者直接阅读Html5的最新标准文档。

本文参考:http://javascript.ruanyifeng.com/htmlapi/canvas.html

本文参与腾讯云自媒体分享计划,欢迎正在阅读的你也加入,一起分享。

发表于

我来说两句

0 条评论
登录 后参与评论

相关文章

来自专栏C/C++基础

CSS中常见的长度单位

注意: (1)字体的尺寸指的是什么? 字体大小是指字在屏幕或印刷介质上表现出来的大小,将每个字看作方块,按方块的对角线长度计算大小。

1412
来自专栏林德熙的博客

WPF 等距布局

实际做的效果很简单,因为在开发我容易就用到了等距的控件。等距控件就是在指定的宽度下,平均把控件放在水平的地方,这样相等于 StackPanel 的水平,但是没有...

731
来自专栏前端知识分享

第157天:canvas基础知识详解

    github地址: https://github.com/malun666/AndyJS2

2512
来自专栏GIS讲堂

Arcgis for JavaSctipt之常用Layer详解

概述:Arcgis for Javasctipt中常见的layer有动态图层(ArcGISDynamicMapServiceLayer

1475
来自专栏一个小程序员的成长笔记

CSS深入理解学习笔记之border

1、border-width   border-width为何不支持百分比:语义和使用场景决定的,现实中各种边框本身的概念就不存在百分比的使用方法。   bor...

3139
来自专栏cnblogs

深入理解和应用display属性(二)

四、inline-block 此类元素是inline + block的合体 1) margin和padding都有效;width和height都有效; .inl...

2136
来自专栏前端知识分享

第167天:canvas绘制柱状图

2003
来自专栏前端说吧

css布局 - 九宫格布局的方法汇总(更新中...)

其实换一种角度和思路,又是一个解决方法,不用margin负值,我们想要li要对其ul两端效果,之所以纠结是因为li又需要margin-right,而右边最后一个...

2142
来自专栏前端知识分享

第103天:CSS3中Flex布局(伸缩布局)详解

Flex是Flexible Box的缩写,意为”弹性布局”,用来为盒状模型提供最大的灵活性。

861
来自专栏猛牛哥的博客

HTMLayout 界面贴图技术

2544

扫码关注云+社区