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. C++学习36 string类和字符串

    C++大大增强了对字符串的支持,除了可以使用C风格的字符串,还可以使用内置的数据类型 string.string 类处理起字符串来会方便很多,完全可以代替C语言中的 char 数组或 char 指针. ...

  2. [Flex] IFrame系列 —— IFrame嵌入html点击其他组件后页面消失的问题

    在flex建的web项目中,打开index.template.html,将param.wmode = "transparent";添加到以下位置 <script type=& ...

  3. Kinect测量人体身高的程序

    对着书上敲得,从中体会kinect骨骼识别与深度识别的原理.大体原理是懂了,但有些细节还没有完全弄明白. using System; using System.Collections.Generic; ...

  4. 【转】关系映射文件***.hbm.xml详解

    http://blog.sina.com.cn/s/blog_7ffb8dd5010144yo.html 附.Oracle使用标准.可变长度的内部格式来存储数字.这个内部格式精度可以高达38位. NU ...

  5. 项目已被os x使用 不能打开-黑苹果之路

    之前复制了几个视频文件到NTFS的盘上,在mac中始终无法使用(甚至是chmod),无论是哪种播放软件,甚至改成dmg类型都无法打开,报“项目已被os x使用 不能打开”,用ls命令发现文件属性中多了 ...

  6. 《Head First 设计模式》ch.1 策略(Strategy)模式

    策略模式 定义了算法族,分别封装起来,让它们可以互相替换,让算法的变化独立于使用算法的客户. 模式名词的意义 威力强大,交流的不止是模式名称,而是一整套模式背后所象征的质量.特性.约束 用更少的词汇做 ...

  7. python修改excel文件

    一.导入模块如图

  8. 未在本地计算机上注册“Microsoft.Jet.OLEDB.4.0”提供程序的处理方式

    今天客户向我反映一个问题,当他们在用我们的系统导出excel表格时,报错:未在本地计算机上注册“Microsoft.Jet.OLEDB.4.0”提供程序 经过找资料终于得到解决方法,记录一下. 在对应 ...

  9. number对象，bom对象

    number对象 新创建一个number的对象,toFixed是精确到位数 var num =new Number('123.1231'); console.log(num.toFixed(1)); ...

  10. No.002 Add Two Numbers

    Add Two Numbers Total Accepted: 160702 Total Submissions: 664770 Difficulty: Medium You are given tw ...