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. java小程序实例 闰年

    判断闰年. package com.test; import java.util.Scanner; import org.junit.Test; public class TestRunNian { ...

  2. crm 2011 plugin setparent setbusiness 用户更改经理 更改办事处

    背景: 在更改经理或者更改办事处时,使用plugin处理相应的团队. 问题:plugin写完,注册时发现使用update注册没有效果,然后bing得到,这里要使用setbusiness 和 setpa ...

  3. 串口总是报'Error opening serial port'

    Comm1.CommName := '//./' + Trim(combx_Port.Text); 目前串口大于20  用上面方法解决的 网上也有上面方法解决如下错误的. 若是您已会应用SPCOMM且 ...

  4. Eclipse Android HH and theme

    一. 汉化方法: 1.Eclipse版本查询:安装目录readme,查版本号;参照查代号如下表: 代号 平台版本 项目 主要版本发行日期 SR1发行日期 SR2发行日期 N/A 3.0 [1] N/A ...

  5. [SQL]分组排练进行更新

    --方法(一):分组排练进行更新 ----------------------------------------------------------------------------------- ...

  6. [ASP.NET]ASP.NET数据绑定菜单控件

    public void BindMenu(Menu mn,MenuItem menu,string mainMenu,string sql) { MenuItem mitem = null; DB d ...

  7. [DataTable] datatable根据表中的字段进行排序

    private DataTable SortTable(DataTable dt,string[] pids) { DataTable dt0 = dt.Clone(); //复制原表结构 ;i< ...

  8. Android Studio 修改 包名 package name

    我们的包名中含有Nav,造成声音不能正常出来:需要改包名,但 android studio 改包名原来还是比较麻烦的,不过现在简单多了: 第一步,直接打开 AndroidManifast.xml 文件 ...

  9. （旧）子数涵数·PS——水杯抠图

    一.首先老规矩,下载所需要的素材. 二.打开Photoshop,并打开已下载好的素材. 三.使用"钢笔工具",快捷键为P,采用"路径"模式,将水杯抠出(例图左上 ...

  10. VR就是下一个浪潮_2016 (GMGC) 全球移动游戏大会观后感

    "VR就是下一个浪潮"  --2016 (GMGC) 全球移动游戏大会观后感   早在2014年参会Unity举办的一年一度的金立方盛典大会,就初次体验了VR头盔设备,于是印象深刻 ...