Canvas绘制图形

1.Canvas绘制一个蓝色的矩形

<!DOCTYPE html>
<html>
<head lang="en">
    <meta charset="UTF-8">
    <title></title>
 
</head>
<body>
 
    <canvas id="myCanvas" width="300" height="200"></canvas>
 
   <script type="text/javascript">
    var canvas=document.getElementById('myCanvas');
    var ctx=canvas.getContext('2d');
    ctx.fillStyle='#000099';
    ctx.fillRect(0,0,80,100);
    </script>
</body>
</html>

显示

2.绘制基本的直线

①绘制直线

<body>
    <canvas id="myCanvas"></canvas>
 
   <script type="text/javascript">
       var canvas=document.getElementById("myCanvas");  //获取Canvas对象
       var ctx=canvas.getContext("2d");            //获取上下文对象
       ctx.beginPath();                             //开始一个新的绘制路径
       ctx.moveTo(10,10);                           //定义直线的起点坐标
       ctx.lineTo(200,10);                          //定义直线的终点坐标
       ctx.stroke();                                //沿着坐标点顺序的路径绘制直线
       ctx.closePath();                             //关闭当前的绘制路径
   </script>
</body>

显示：

② 绘制二次曲线：

是直线锥面的两腔被一平面所截而得的曲线。二次曲线由一个起点、一个终点和一个控制点决定，当控制点经过圆锥顶点时，曲线变成一个点、直线或者相交直线，当控制点不经过圆锥顶点时，曲线可能是圆、锥圆、双曲线或抛物线。

<body>
 
<canvas id="myCanvas">您的浏览器不支持canvas标签</canvas>
 
<script type="text/javascript">
var canvas=document.getElementById('myCanvas');
if(canvas && canvas.getContext){                //判断Canvas对象是否为空
    var ctx = canvas.getContext("2d");            //获取Canvas对象上下文
    ctx.beginPath();                                //开始一个新的绘制路径
    ctx.moveTo(100,50);                            //定义直线的起点坐标为(100,50)
    ctx.quadraticCurveTo(100,15,300,30);        //设置二次曲线坐标
    ctx.stroke();                                    //绘制路径
}
</script>
 
</body>

判断Canvas对象是否为空：是因为有些浏览器对Canvas的支持不是很好，为了避免网页运行时出现错误，需要提前判断。

显示：

③绘制贝赛尔曲线

每一个顶点都有两个控制点，用于控制在该顶点两侧的曲线的弧度。它的一个起点、一个终点、两个控制点，共四个点决定一条曲线。是用Canvas的bezierCurveTo函数绘制贝赛尔函数

<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>4.2.3.html</title>
</head>
<body>
<canvas id="myCanvas">您的浏览器不支持canvas标签</canvas>
<script type="text/javascript">
var canvas=document.getElementById('myCanvas');
if(canvas && canvas.getContext){                //判断Canvas对象是否为空
    var ctx = canvas.getContext("2d");            //获取Canvas对象上下文
    ctx.beginPath();                                //开始一个新的绘制路径
    ctx.moveTo(50,200);                            //定义直线的起点坐标为(50,200)
    ctx.bezierCurveTo(50,100,200,100,200,150);    //设置贝塞尔曲线坐标
    ctx.stroke();                                    //绘制路径
}
</script>
</body>
</html>

显示：

④绘制圆弧

 <!doctype html>
 <html>
 <head>
 <meta charset="utf-8">
 <title>4.2.4.html</title>
 </head>
 <body>
 
 <canvas id="myCanvas">您的浏览器不支持canvas标签</canvas>
 
 <script type="text/javascript">
 var canvas=document.getElementById('myCanvas');
 
 if(canvas && canvas.getContext){                //判断Canvas对象是否为空
     var ctx = canvas.getContext("2d");            //获取Canvas对象上下文
     ctx.beginPath();                                //开始一个新的绘制路径
     ctx.arc(100,75,50,0,2*Math.PI*0.75);        //设置圆弧坐标
     ctx.stroke();                                    //绘制路径
 }
 </script>
 </body>
 </html>

显示：

3.绘制简单形状

①绘制圆形

 <!doctype html>
 <html>
 <head>
 <meta charset="utf-8">
 <title>4.3.1.html</title>
 </head>
 <body>
 
 <canvas id="myCanvas">您的浏览器不支持canvas标签</canvas>
 
 <script type="text/javascript">
 var canvas=document.getElementById('myCanvas');
 if(canvas && canvas.getContext){                //判断Canvas对象是否为空
     var ctx = canvas.getContext("2d");            //获取Canvas对象上下文
     ctx.beginPath();                                //开始一个新的绘制路径
     ctx.arc(100,75,50,0,2*Math.PI);                //设置圆坐标
     ctx.stroke();                                    //绘制路径
 }
 </script>
 </body>
 </html>

显示：

②绘制三角形

绘制三条直线，并设置三条直线的起点和终点相互连接

 <!DOCTYPE html>
 <html>
 <head lang="en">
     <meta charset="UTF-8">
     <title></title>
 </head>
 <body>
 
    <canvas id="myCanvas"></canvas>
 
    <script type="text/javascript">
        var canvas=document.getElementById('myCanvas');
        if(canvas && canvas.getContext){          //判断Canvas对象是否为空
            var ctx=canvas.getContext("2d");     //获取Canvas对象上下文
            ctx.beginPath();                       //开始一个新的绘制路径
            ctx.moveTo(0,10);                      //设置三角形的起点
            ctx.lineTo(200,20);                    //设置三角形的第二个起点
            ctx.lineTo(280,100);                   //设置三角形的第三个起点起点
            ctx.closePath();                       //将三角形第三个点与起点连接
            ctx.stroke();                          //绘制路径
        }
    </script>
 </body>
 </html>

显示：

③绘制圆角矩阵

将使用arcTo函数绘制圆角矩阵，arcTo（x1,x2,y1,y2,r）:绘制介于两个切线之间的圆弧，坐标点(x1,y1)为圆弧的起点坐标，（x2,y2）为圆弧的终点坐标，r为圆弧的半径。

 <body>
 
     <canvas id="myCanvas"></canvas>
 
     <script type="text/javascript">
         var canvas=document.getElementById("myCanvas");
         if(canvas && canvas.getContext){
             var ctx=canvas.getContext("2d");
             ctx.beginPath();
             ctx.moveTo(10,10);            //在左上方开始
             ctx.arcTo(100,10,100,20,10);  //绘制右上方圆角
             ctx.arcTo(100,110,90,110,10); //绘制右下方圆角
             ctx.arcTo( 0,110,0,100,10);    //绘制左下方圆角
             ctx.arcTo( 0,10,10,10,10);    //绘制左上方圆角
             ctx.stroke();
         }
     </script>
 </body>

显示：

④绘制自定义图形

 <body>
 
 <canvas id="myCanvas"></canvas>
 
 <script type="text/javascript">
     var canvas=document.getElementById("myCanvas");
     if(canvas && canvas.getContext){
         var ctx=canvas.getContext("2d");
         ctx.beginPath();
         ctx.arc(75,75,50,0,Math.PI*2,true);            //在左上方开始
         ctx.moveTo(110,75);
         ctx.arc(75,75,35,0,Math.PI,false);            //在左上方开始
         ctx.moveTo(65,65);
         ctx.arc(60,65,5,0,Math.PI*2,true);            //在左上方开始
         ctx.moveTo(95,65);
         ctx.arc(90,65,5,0,Math.PI*2,true);            //在左上方开始
 
         ctx.stroke();
     }
 </script>
 </body>

笑脸：

Canvas绘制图形的更多相关文章

html5 Canvas绘制图形入门详解
html5,这个应该就不需要多作介绍了,只要是开发人员应该都不会陌生.html5是「新兴」的网页技术标准,目前,除IE8及其以下版本的IE浏览器之外,几乎所有主流浏览器(FireFox.Chrome. ...
HTML5—canvas绘制图形（1）
1.canvas基础知识 canvas元素是HTML5中新增的一个重要的元素,专门用来绘制图形,不过canvas本身不具备画图的能力,在页面中放置了canvas元素,就相当于在页面中放置了一块矩形的“ ...
canvas 绘制图形
canvas 绘制图形: 注意: canvas 的宽高设置在行内,否则会使画布(canvas)产生扭曲,绘图变形: <!DOCTYPE html> <html lang=" ...
[Selenium] 操作 HTML5 中的 Canvas 绘制图形
测试 http://literallycanvas.com/ 以 Chrome Driver 为例阐述,通过 Actions 在 Canvas 上绘制一个封闭图形.对于 Canvas 上的操作,推荐 ...
使用Canvas绘制图形的基本教程
原文地址:http://www.cnblogs.com/picaso/archive/2012/11/26/2789077.html HTML5火的正热,最近有个想法也是要用到HTML的相关功能,所以 ...
HTML5之Canvas绘图——使用Canvas绘制图形的基本教程
原文转自:http://www.cnblogs.com/picaso/archive/2012/11/26/2789077.html HTML5火的正热,最近有个想法也是要用到HTML的相关功能,所以 ...
HTML5 canvas绘制图形
demo.html <!DOCTYPE html> <html lang="en"> <head> <meta charset=" ...
HTML5使用Canvas来绘制图形
一.Canvas标签: 1.HTML5<canvas>元素用于图形的绘制,通过脚本(通常是javascript)来完成. 2.<canvas>标签只是图形容器,必须使用脚本来绘 ...
使用html5 canvas绘制图片
注意:本文属于<html5 Canvas绘制图形入门详解>系列文章中的一部分.如果你是html5初学者,仅仅阅读本文,可能无法较深入的理解canvas,甚至无法顺畅地通读本文.请点击上述链 ...

随机推荐

Ubuntu中root用户和user用户
从user用户切换到root用户在ununtu系统中缺省用户是user,出于安全考虑,默认时Ubuntu的root用户时没有固定密码的,它的密码是随机产生并且动态改变的. 但是有的时候我们的用户要执 ...
ELF Format 笔记（十三）—— 段权限
ilocker:关注 Android 安全(新手) QQ: 2597294287 一个可被系统加载的程序至少拥有一个可加载段.当系统创建可加载段的内存映像时,会根据 p_flags 赋予一定的访问权限 ...
spark dataframe unionall
今天本来想写一个spark dataframe unionall的demo,由于粗心报下面错误: Exception in thread "main" org.apache.spa ...
CentOS安装MySQL
好记性不如烂笔头,记录一下 yum list installed | grep mysql #检查是否安装了mysql yum -y remove mysql-libs.x86_64 #卸载已经安装的 ...
第1章Java入门体验
第1章Java入门体验 1.java简介和平台应用 Java是sun公司开发出来,现在属于ORACLE公司java分为几个部分:首先是最基础的Java SE部分,这部分是Java的基础知识,主要包括: ...
[随记]Eval的连接方法
在 .NET 3.5 及以下版本中,如下做法是错误的: <asp:Label ID="_column" runat="server" Text='栏目 I ...
HTML5入门（CSS样式-------------------（CSS基础知识点----------------------------））
CSS继承性+层叠性+盒子+浮动一.CSS继承性 eg: <style> div{ ...
haproxy 新手上路
apache.nginx之类的反向代理(转发)功能,通常只能用于http协议,其它协议就不好使了(注:nginx据说商业版的,支持tcp协议了). haproxy可以弥补这方面的不足,haproxy支 ...
Qt——自定义属性
一.Qt中的属性属性是指窗口或控件的属性,比如opacity属性表示“透明度”,geometry指的是“位置和大小”,pos属性代表“位置”. qt中的控件有自带的属性,我们也可以自己定义属性. Q ...
ReactNative新手学习之路02第一个RN项目
开始第一个RN项目(iOS版)我的电影列表0.1版,后面做列表版打开上一节项目 index.ios.js,android打开index.android.js.我这里使用的是Atom编辑器,你也可以使 ...

Canvas绘制图形

Canvas绘制图形的更多相关文章

随机推荐

热门专题