canvas绘制有两神方法:
1)、填充(fill)
填充是将图形内部填满.

2)、绘制边框 (stroke)
绘制边框是不把图形内部填满，只是绘制图形的外框.

当我们在绘制图形的时候，首先要设定好绘制的样式，然后我们就可以调用有关的方法进行绘制

fillStyle属性
填充的样式，在这个属性里面设置填入的填充颜色值

strokeStyle属性
图形边框的样式，在这个属性里面设置填入边框的填充颜色

绘制矩形案例：

在body的属性里面，使用onload="draw('canvas' )“语句，调用脚本文件中的draw函数进行图形绘画

画布的创建方法：指定 id ， width（画布宽度）， height（画布高度）

创建一个画布，长度为600，高度为400

<body onload="draw('canvas')">

<canvas id="canvas" width="600" height="400"></canvas>
</body>

　

引入一个名为canvas的is脚本，js脚本的语言编码是utf-8

 function draw(id){

     var canvas = document.getElementById(id);

     var context = canvas.getContext('2d');  //getContext() 方法可返回一个对象

     context.fillStyle = "green";  // 设置或返回用于填充绘画的颜色、渐变或模式

     context.strokeStyle = "#fff";  //图形边框的填充颜色

     context.lineWidth = 5;  //用宽度为 5 像素的线条来绘制矩形：

     context.fillRect(0,0,400,300);  // x轴 y轴 宽 和 高 ,绘制“被填充”的矩形

     context.strokeRect(50,50,180,120);  //绘制矩形（无填充）

     context.strokeRect(110,110,180,120);

 }

使用filiRect方法和strokeRect方法来填充矩形和绘制矩形的边框
context. fillRect (x,y,width,height)
context.strokeRect (x,y,width,height)

这两种方法的参数都是一样的，x是指拒形的起点横坐标，y是指拒形的纵坐标.坐标的原点是canvas画布的最左上角，

width是指拒形的长度，height是指矩形的高度.

绘制圆形案例：

创建圆形路径时，需要使用图形上下文对像的arc方法。

context.arc (x,y,radius,starAngle,endAngle,anticlockwise)

x是绘制圆形的起点横坐标，y是绘创圆形起点的纵坐标，radius是图形的半径，
starAngle是开始的角度，endAngle是结束的角度·

anticlockwise是否按顺时针方向绘制

绘制半径与圆弧时指定参数为开始弧度与结束弧度，也可以把角度换成弧度

var radius = degrees *Math.Pl/180

这个里面的Math.Pl表示的角度是180度，Math.Pl*2的角度是360度.

 function draw(id){

             var canvas = document.getElementById(id);

             var context = canvas.getContext('2d');

             context.fillStyle = "#f1f2f3";

             context.fillRect(0,0,400,400);

             for(var i=0;i<10;i++){

                 context.arc(i*25,i*25,i*10,0,Math.PI*2,true);

                 context.fillStyle = "rgba(255,0,0,0.25)";

                 context.fill();

     }

 }

保存文件　

 function draw(id){

     var canvas = document.getElementById(id);

     var context = canvas.getContext('2d');

     context.fillStyle = "green";

     context.fillRect(0,0,400,300);

     window.location = canvas.toDataURL('image/png');

 }

canvas 绘制矩形和圆形的更多相关文章

  1. h5学习-canvas绘制矩形、圆形、文字、动画

    绘制矩形<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8 ...

  2. Canvas 绘制矩形，圆形，不规则图形（线条），渐变等图像效果

    绘制矩形: getContext("2d") 对象是内建的 HTML5 对象,拥有多种绘制路径.矩形.圆形.字符以及添加图像的方法. fillStyle 方法将其染成红色,fill ...

  3. html5 canvas绘制矩形和圆形

    <!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title> ...

  4. HTML5绘制矩形和圆形并且还有获取在这个图层内的坐标的思路和代码 - feilong_12的专栏 - 博客频道 - CSDN.NET

    body{ font-family: "Microsoft YaHei UI","Microsoft YaHei",SimSun,"Segoe UI& ...

  5. canvas绘制矩形

    canvas绘制矩形 方法 fillRect(x, y, width, height) 画一个实心的矩形 clearRect(x, y, width, height) 清除一块儿矩形区域 stroke ...

  6. canvas 绘制 矩形 圆形

    <!DOCTYPE html><html xmlns="http://www.w3.org/1999/xhtml"><head> <tit ...

  7. canvas 绘制矩形

    XXX(x,y,width,height)   x矩形左上角x坐标                                   y矩形左上角y坐标                       ...

  8. vue下canvas绘制矩形

    起因:根据项目需求本人写了一个绘制矩形的组件.功能:在图片中绘制矩形,根据图片大小进行自适应展示,获取图片矩形坐标.思路:首先定义一个固定大小的DIV,DIV标签中有监测鼠标变化的四个事件moused ...

  9. canvas绘制线和矩形

    ###canvas绘制矩形 HTML中的元素canvas只支持一种原生的图形绘制:矩形.所有其他的图形的绘制都至少需要生成一条路径 1.绘制矩形 canvas提供了三种方法绘制矩形: ----> ...

随机推荐

  1. 光流算法：Brox光流的OpenCV源码解析

    OpenCV中DeepFlow代码其实是Brox光流,而非真正的DeepFlow光流,在将近一个月的研究.移植及优化过程中,对Brox光流有了较深刻的认识.我对OpenCV中源码进行了详细的分析,并以 ...

  2. 算法库：基础线性代数子程序库（Basic Linear Algebra Subprograms，BLAS）介绍

    调试DeepFlow光流算法,由于作者给出的算法是基于Linux系统的,所以要在Windows上运行,不得不做大量的修改工作.移植到Windows平台,除了一些头文件找不到外,还有一些函数也找不到.这 ...

  3. NYOJ 123 士兵杀敌4-树状数组的插线求点

    士兵杀敌(四) 时间限制:2000 ms  |  内存限制:65535 KB 难度:5 描述 南将军麾下有百万精兵,现已知共有M个士兵,编号为1~M,每次有任务的时候,总会有一批编号连在一起人请战(编 ...

  4. (medium)LeetCode 210.Course Schedule II

    There are a total of n courses you have to take, labeled from 0 to n - 1. Some courses may have prer ...

  5. Chapter Data Modification & Chapter Data Validation

    Chapter Data Modification XF的数据提交,支持单行.集合和多层次的master-details结构的数据. Create 当提交如下数据 <Job> <Id ...

  6. ipv6 测试

    # ifconfig wlp0s29f7u6: .... ... inet6 fe80::a00:20ff:fe9d:5c55 prefixlen 64 scopeid 0x20<link> ...

  7. css 使用background背景实现border边框效果

    css中,我们一般使用border给html元素设置边框,但也可以使用background背景来模拟css边框效果,本文章向大家介绍css 使用background背景实现border边框效果,需要的 ...

  8. JQuery基础教程：入门

    JQuery能做什么 JQuery在线手册 1.取得文档中的元素 如果不使用JavaScript库,遍历DOM(Document Object Model,文档对象模型)树,以及查找HTML文档结构中 ...

  9. Windows操作 - Photoshop为图片添加透明立体水印

    原文地址:http://design.yesky.com/photoshop/252/2427752.shtml 本文我们介绍用Photoshop为图片添加透明立体水印的方法和技巧. 原图: 打开原图 ...

  10. 读书笔记－－编程珠玑II

    学化学的应该都知道chemdraw,这是一款专门绘制化学结构的软件,什么苯环.双键各种word难以搞定的分子式,你可以轻松的用chemdraw完成,可以称得上化学工作者居家旅行必备的良药.其实早在19 ...