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. 搭建一个springmvc helloworld程序

    1.加jar包,需要8个,从springframework里面选 logging core aop context expression bean web webmvc 2.配置web.xml,在文件 ...

  2. Java UDP网络编程 - 最简单示例

    UDP也是网络通讯中的一个重要协议,与TCP区别可参见浅谈TCP/IP 和 UDP的区别,本文就对Java UDP通讯做一个简单例子介绍 服务端: package wyf; import java.i ...

  3. Html5中的跨页面消息传输

    1.如果要接受从其他的窗口那里发过来的消息,就必须对窗口对象的message事件进行监控. window.addEventListener("message",function() ...

  4. 解决tomcat默认45s启动超时的问题

    进入工作空间目录下的.metadata\.plugins\org.eclipse.wst.server.core子目录,找到servers.xml文件,编辑它,找到start-timeout这一行,把 ...

  5. (easy)LeetCode 202.Happy Number

    Write an algorithm to determine if a number is "happy". A happy number is a number defined ...

  6. 一道 JavaScript 面试题

    有一道 JavaScript 面试题. f = function () { return true; }; g = function () { return false; }; (function() ...

  7. sort函数CCF

    题是比较水的啦,但是好久没有用sort函数啦,有点生疏^...^ #include<stdio.h> #include<string.h> #include<iostre ...

  8. 使用Spring的Property文件存储测试数据 － 编写测试和调用测试数据

    准备好测试数据后,我们可以开始编写测试了,在测试用例中调用我们property文件中的测试数据. 我自己写了一个TestCase作为所有测试类基类,基类中定义了两个变量来代表之前建好的两个测试数据文件 ...

  9. Orchard官方文档翻译(十一) 使用Tags组织文本

    原文地址:http://docs.orchardproject.net/Documentation/Organizing-content-with-tags 想要查看文档目录请用力点击这里 最近想要学 ...

  10. Botposter.com集群ETCD2.3.7升级至3.0实录[原创]

    7月1日,为庆祝我党生日,ETCD隆重发布了3.0版本.Botposter.com也在第一时间对集群进行了升级.本文是升级过程的记录与总结(文中假设读者已经使用或测试过ETCD V2,如有不妥请见谅) ...