文档章节

html5 canvas基础(1)--路径

alonelywolf
 alonelywolf
发布于 2015/01/25 12:52
字数 432
阅读 599
收藏 7
<!DOCTYPE html>
<html>
<head lang="en">
    <meta charset="UTF-8">
    <title>html5 canvas API</title>

    <script type="text/javascript">

        window.onload=function(){

            var canvas = document.getElementById('can');


            //找不到元素的处理
            if (canvas==null){
               console.info('canvas元素不存在..');
                return  false;

            }
            /**
             *  获取上下文(2d)平面图
             * @type {CanvasRenderingContext2D}
             */
            var context = canvas.getContext('2d');
            //设置填充样式
            context.fillStyle="yellow";
            //填充一个矩形,无背景色
            context.fillRect(10,10,250,250);
             //填充样式,颜色英文,rgb,十六进制数均可以
            context.fillStyle="green";
            //填充一个矩形
            context.fillRect(140,140,250,250);
            //设置图形边框的样式
            context.strokeStyle="red";
            //边框线宽
           context.lineWidth=10;
            //绘制一个矩形(x,y,w,h) 在坐标(x,y)处绘制宽和高为(w,h)的矩形
            context.strokeRect(100,100,200,200);

            //清除矩形,擦除指定区域中的图像,让其背景变为透明
           context.clearRect(100,100,200,200);
             /**
              * 绘制圆形或者圆弧
              * */
            for(var i=0;i<10;i++){

                //开始创建路径
                context.beginPath();
                /**
                 * arc有六个参数(x,y,radius,startAngle,endAngle,anticlockwise)
                 * (起点横坐标,起点纵坐标,圆形(弧)的半径,开始角度,结束角度,是否顺时针方向绘制)
                 */
                context.arc(35*i,35*i,i*6,0,Math.PI*2,true);
                //关闭路径,路径的绘制工作完成,还没开始绘制图像
                context.closePath();
                ///填充颜色
                context.fillStyle='rgba(245,0,0,0.5)';
                //填充图形
               context.fill();

            }
            /**
             * 绘制一个圆弧
             */
            context.beginPath();
            context.arc(300,300,100,90,120,true);
            context.closePath();
            context.fillStyle="pink";
            context.fill();




            var can= document.getElementById("line");
            /**
             *
             * @type {CanvasRenderingContext2D}
             */
            var ctx =can.getContext('2d');

            ctx.fillStyle='rgb(100,200,210)';

            ctx.fillRect(0,0,350,350);

            var m=0;
            var nx=100;
            var ny=100;
            var s=100;

            ctx.beginPath();
            ctx.fillStyle='rgb(200,240,210)';
            ctx.strokeStyle="rgb(0,0,123)";
            var $x=Math.sin(0);
            var $y=Math.cos(0);
            var $d=Math.PI/15*11;
            for (var i=0;i<30;i++){

                var $x=Math.sin($d*i);
                var $y=Math.cos($d*i);
                ctx.lineTo(nx+$x*s,ny+$y*s);

            }
            ctx.closePath();
            ctx.fill();
            ctx.stroke();
        }

    </script>
</head>
<body>

  <canvas id="can" width="400" height="400" style="background-color:gray;">
您的浏览器不支持canvas!

  </canvas>

  <canvas id="line" width="400" height="400" style="background-color:salmon;">
      您的浏览器不支持canvas!

  </canvas>


</body>
</html>

复制代码



© 著作权归作者所有

alonelywolf
粉丝 4
博文 62
码字总数 34590
作品 0
丰台
程序员
私信 提问
HTML5开发手机App之:HTML5系统教程-何韬-专题视频课程

HTML5开发手机App之:HTML5系统教程—23518人已学习 课程介绍 通过案例进行详尽的讲解,浓缩HTML5开发APP之前端基础语法,掌握HTML5的开发方法,为进一步的深入学习打下基础。 课程收益 使零...

pkutao
2016/02/04
0
0
推荐8款HTML5相关的特殊效果

HTML5是HTML的升级版,HTML5有两大特点:首先,强化了 Web 网页的表现性能。其次,追加了本地数据库等 Web 应用的功能。广义论及HTML5时,实际指的是包括HTML、CSS和JavaScript在内的一套技术...

gbin1
2014/03/26
429
0
HTML5 从基础学习之二 --Canvas Geolocation Cache

HTML5 的canvas元素使用JavaScript在网页上绘制图像 其拥有多种绘制路径,矩形,圆形,字符以及添加图像的方法。 1、Canvas元素的创建(规定元素的id,宽度和高度) <canvas id="myCanvas" ...

Drealin
2012/09/07
0
0
史无前例的 HTML5 资源参考指南

尽管 HTML5 规范在 2014 年之前不会有正式版本,很多设计师已经开始试水高级浏览器已经支持的部分 HTML5 功能。HTML5 为 Web 设计和应用开发打开了一扇全新的门,原生支持了以前只可能使用 ...

李长春
2012/03/02
0
1
推荐10款非常优秀的HTML5开发工具

HTML5发展如火如荼,随着各大浏览器对HTML5技术支持的不断完善以及HTML5技术的不断成熟,未来HTML5必将改变我们创建Web应用程序的方式。今天这篇文章向大家推荐10款优秀的HTML5开发工具,帮助...

长平狐
2012/10/09
156
0

没有更多内容

加载失败,请刷新页面

加载更多

mysql已存在的表增加自增字段

需求: 已有的mysql数据表,希望增加一个自增的字段,并设置新数据的初始值。 实际上不复杂,只是做个备忘。 测试表 CREATE TABLE `t_abc` ( `name` varchar(20) DEFAULT NULL) ENGINE=In...

polly
27分钟前
1
0
去掉截屏功能

/home/rk3288_600_f703/frameworks/base/services/core/java/com/android/server/policy/PhoneWindowManager.java 有一个截屏的线程,注释掉...

安卓工程师王恒
35分钟前
0
0
解决vim打开之后乱码的问题

在Windows中的文档,传输到Linux系统中(使用rz命令),出现乱码 root@localhost ~]# rpm -qf `which iconv` glibc-common-2.17-105.el7.x86_64 [root@localhost ~]# rpm -ihv /mnt/Packages......

寰宇01
52分钟前
2
0
aldi 2017年1月记录

../../tools/CBLAS/lib/cblas_LINUX.a ../../tools/lapack-3.4.2/liblapacke.a \../../tools/lapack-3.4.2/librefblas.a -lgfortran \../../tools/lapack-3.4.2/liblapack.a \../../......

MtrS
53分钟前
3
0
Choerodon如何进行日志收集与告警

作者:董文启 应用程序日志是由软件应用程序记录的事件文件, 它一般包含错误,信息事件和警告。一个良好的日志系统有助于快速发现问题,定位问题,同时也为业务分析起到一定的作用。 传统E...

Choerodon
今天
3
0

没有更多内容

加载失败,请刷新页面

加载更多

返回顶部
顶部