画直线:

var c = document.getElementById("myCanvas"); //不要忘写document
var ctx = c.getContext("2d"); ctx.lineWidth = 10;
ctx.strokeStyle = "red"; // 注意不是strokeColor; //创建一个路径
ctx.beginPath();
ctx.moveTo(10,10);
ctx.lineTo(50,50);
ctx.stroke();

添加线帽:ctx.lineCap = “butt”(默认) ;”round”(半圆形); ”square”(正方形);  

//额外补充,加深 begbinPath 与stroke 的区域理解
ctx.beginPath();
ctx.moveTo(100,100);
ctx.lineTo(200,100);
ctx.strokeStyle = "red";
ctx.stroke(); //(1)
ctx.beginPath(); //(2)
ctx.moveTo(100,200);
ctx.lineTo(200,200);
ctx.strokeStyle = "blue";
ctx.stroke(); (3)
//代码绘制一蓝一红两条线;省略 (1)或(3) 都只能绘制其中一条;省略 (2)会得到
一紫一蓝;省略 (1)和(2) 会得到两条蓝色

画矩形:

ctx.lineWidth = 10;
ctx.strokeStyle = "yellow"; //实心矩形:ctx.fillStyle = “yellow”;
ctx.beginPath();
//用 strokeRect 函数来绘制一个空心矩形;四个参数分别为起点坐标(左上角)
X、 Y,矩形长宽。
ctx.strokeRect(10,10,100,100); //实心矩形:ctx.fillRect(10.10.100.100);
/*strokeRect 函数替代方法。 //实心矩形:
* ctx.rect(10,10,100,100); //ctx.rect(10,10,100,100);
* ctx.stroke(); //ctx.fill();
*/

画圆弧:

ctx.beginPath();
//用 arc 函数绘制圆弧,六个参数分别为圆心坐标 X、Y ,半径,起始角度(a),
终止角度( b),是否逆时针(圆弧方向 c)
ctx.arc(100,100,70,0,1/2*Math.PI,true);
//可通过 fill 函数绘制实心圆弧
ctx.stroke();

//起始角度与终止角度都是根据圆心向右水平线确定的,它们分别确定圆弧开始点与结束点;再确定圆弧方向绘制。

fill 画圆弧的变化情况:

 

画圆角矩形:

ctx.beginPath();
ctx.moveTo(20,20);
ctx.lineTo(70,20);
//用 arcTo 函数来绘制圆弧,五个参数分别是 p1 坐标,p2 坐标,圆弧半径。
ctx.arcTo(120,30,120,70,50);
ctx.lineTo(120,120);
ctx.stroke();

P1 点X 坐标与P2 点 X 坐标相同;P1 点Y 坐标相比 P2 点 Y 坐标更接近起始点 Y 坐标

檫除 canvas 画板:

//用 clearRect 函数擦除一个矩形区域,四个参数分别是起点 X、Y 坐标,矩形长宽。
ctx.clearRect(30,30,50,50);
//无需在 ctx.beginPath()中;无需使用 ctx.stroke()
//擦除画板,对设置之前绘制的图形有效,对之后的无效。

画曲线:

  • 二次贝尔塞尔曲线:

    ctx.beginPath();
    ctx.moveTo(100,100);
    //用 quadraticCurveTo 函数,四个参数分别是控制点( a)X 、Y 坐标,终点( b)
    X、 Y 坐标。
    ctx.quadraticCurveTo(20,50,200,20)
    ctx.stroke();

  • 三次贝尔塞尔曲线:
    ctx.beginPath();
    ctx.moveTo(68,130);
    //用 berzierCurveTo 函数,六个参数分别是控制点( a)X 、Y 坐标,控制点( b)
    X、 Y 坐标,终点( c)X 、Y 坐标。
    ctx.bezierCurveTo(20,10,268,10,268,170);
    ctx.stroke();

利用 clip 在指定区域绘图:

//绘制个圆
ctx.arc(100,100,40,0,2*Math.PI,true); //目前已知只能用 arc、rect 设置区域
//用 clip 函数将这个圆作为绘制操作的区域,之后画出的图形只能显示在这个区
域内。也可使用 ctx.rect()绘制矩形区域。
ctx.clip(); //对在这之前绘制的图像无效
ctx.beginPath();
ctx.fillStyle = "lightblue";
ctx.fillRect(0,0,300,300);//绘制出来的矩形只能看到其在圆内的部分

  

绘制自定义图形:

根据上面的图形进行组合,如:直线加三次贝塞尔曲线
//绘制直线部分
ctx.beginPath();
ctx.lineWidth = 5; ctx.strokeStyle = "red";
ctx.moveTo(100,150);
ctx.lineTo(150,50);
ctx.lineTo(200,150);
ctx.lineTo(150,250);
ctx.lineTo(100,150)
ctx.stroke();
//绘制三次贝尔塞尔曲线部分
ctx.beginPath();
ctx.moveTo(100,150);
ctx.bezierCurveTo(50,100,100,0,150,50);
ctx.bezierCurveTo(200,0,250,100,200,150);
ctx.bezierCurveTo(250,200,200,300,150,250);
ctx.bezierCurveTo(100,300,50,200,100,150);
ctx.stroke();

  

//可以根据对称性,设置特定的长度确定三次贝塞尔曲线的控制点,如上面例子中设置50.

//使用 beginPath()表示开始一段新的绘制,相当于局部函数区域,里面有的变量设置会覆盖外面的设置。

//综合绘制填充图片时,注意覆盖顺序。

绘制文本:

  • 绘制文字:

    //设置文字大小与字体
    ctx.font = "30px Arial";
    //使用函数 fillText 绘制文本,四个参数分别为文本字符串,默认点 a 的X 坐标,
    Y 坐标,文本最大宽度(可省略,在最大范围内为本身的宽度,超过范围则压缩。)
    ctx.fillText("Hello World",100,50); //可以用 fillStyle 设置字体颜色为单色或是设置好
    的颜色渐变 ;注意fillText 不能像fillRect 那样拆分成 fill 与rect 执行。

     

    //使用函数 strokefill 绘制文本
    ctx.strokeText("Hello World",100,50);

      

  • 粗体效果:
    //使用 font-weight 值:normal(正常), bold(粗体),bolder(更粗 ),lighter( 更细)。
    ctx.font = “normal 30px Arial”;
    //或者使用数字
    ctx.font = “100 30px Arial”; / /目前已知只有 100、600 、900
  • 斜体效果:

    ctx.font = “italic 30px Arial”;
    

      

HTML-Canvas01的更多相关文章

  1. 总结html5-canvas学习笔记

    canvas是html5中很重要的一部分,我们可以用它来绘制各种平面图形, 3d图,动画等等.每每看到网上超炫的html5页面,首先立马下载下来,心里想着有一天自己也可以做出这样酷炫的效果,骚年你是不 ...

  2. 用canvas绘制一个时钟

    实现一个时钟的绘制和时间的显示 一,首先是页面的搭建html部分以及一点点的css代码,因为css这块用的比较少,所以就没有单独出来: <!DOCTYPE html> <html l ...

  3. canvas学习笔记(一)-认识canvas

    canvas是html5新增的一个标签,主要用于图形的绘制.我们可以把它理解为是浏览器给我们提供了一个画板,至于要绘制怎样的画卷,就看神笔马良你的主意了.而在canvas上绘制图形使用的笔,就是js了 ...

  4. HTML5 Canvas圆盘抽奖应用(适用于Vue项目)

    <!DOCTYPE html> <html lang="zh-cn"> <head> <meta charset="UTF-8& ...

  5. canvas知识02:图片放大镜效果

    效果截图: JS代码: <script> // 初始化canvas01和上下文环境 var cav01 = document.getElementById('cav01'); var cx ...

  6. OpenCV4之C++入门详解

    OpenCV之C++入门 1.Visual Studio安装及环境配置与搭建 下载地址:https://my.visualstudio.com/Downloads?q=Visual,下载后按照说明安装 ...

随机推荐

  1. WebRequest中的工厂方法模式

  2. iOS工程如何支持64-bit(转)

    苹果在2014年10月20号发布了一条消息:从明年的二月一号开始,提交到App Store的应用必须支持64-bit.详细消息地址为:https://developer.apple.com/news/ ...

  3. 用 Java 实现断点续传 (HTTP)

    断点续传的原理 其实断点续传的原理很简单,就是在 Http 的请求上和一般的下载有所不同而已. 打个比方,浏览器请求服务器上的一个文时,所发出的请求如下: 假设服务器域名为 wwww.sjtu.edu ...

  4. XSS攻击:获取浏览器记住的明文密码

    作者:余弦(@evilcos) 0x01. XSS获取明文密码的多种方式 我已经感受到Web潮流带来的巨大革新,尤其是最近HTML5越来越火.浏览器们在客户端瓜分着这个Web OS,只要是对用户体验好 ...

  5. 文字编辑器kindeditor-min.js的使用

    例子: <link rel="stylesheet" type="text/css" href="<?=$WebSiteRootDir?& ...

  6. 当前标识(IIS APPPOOL\DefaultWebSite)没有对“C:\Windows\Microsoft.NET\Framework64\v2.0.50727\Temporary ASP.NET Files“的写访问权限

    将C#写的webservice发布到IIS后,通过浏览器访问测试,出现如下错误: 根据提示:对Tempory ASP.NET Files没有写访问权限,在资源管理其中定位到这个地址,发现没有这个文件夹 ...

  7. object-c面向对象2

    我们知道在c#中有访问私有成员变量的get  和set方法.这个目的是用来公开实力对象的私有变量.我看了下ios的访问修饰符.也就是private,public,protected.这些基本上都和c# ...

  8. 【JAVA、C++】LeetCode 021 Merge Two Sorted Lists

      Merge two sorted linked lists and return it as a new list. The new list should be made by splicing ...

  9. CSS 样式显示为小手

    因为工作需要把鼠标放上去显示小手形状, css样式如下: style="cursor:hand"    部分浏览器支持 style="cursor:pointer&quo ...

  10. July 11th, Week 29th Monday, 2016

    I want to win a trophy, it's the most important. 我希望获得冠军奖杯,这是最重要的事情. Win a trophy, stand on the very ...