绘制矩形
<!DOCTYPE html>

<html lang="en">

<head>

    <meta charset="UTF-8">

    <title>canvas绘制矩形</title>

    <script type="text/javascript" src="canvas.js"></script>

    <style type="text/css">//让矩形显示置顶

        body{

            margin: 0;

            padding: 0;

        }

    </style>

</head>

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

<canvas id = "canvas" width="500" height="350"></canvas>

</body>

</html>

//canvas.js
function draw(id){

    var canvas = document.getElementById(id);

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

    context.fillStyle = "#000";

    context.strokeStyle = "#f60";

    context.lineWidth = 5;

    context.fillRect(0,0,500,350);

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

}

绘制一个矩形：
1。获取canvas元素 getElementById()
2。取得上下文 getContext（）
3。填充与绘制边框 fill() stroke()
4。设置绘制样式 fillStyle stokeStyle 属性
5。指定画笔宽度 getcontext().linewidth
6。设置颜色值 通过第4步的属性来设置
7。绘制矩形 context.fillRect(x,y,width,height)
context.strokeRect(x,y,width,height)
 
 绘制圆形：
<!DOCTYPE html>

<html lang="en">

<head>

    <meta charset="UTF-8">

    <title>canvas绘制圆形</title>

    <script type="text/javascript" src="canvas.js"></script>

    <style type="text/css">

        body{

            margin: 0;

            padding: 0;

        }

    </style>

</head>

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

<canvas id = "canvas" width="500" height="500"></canvas>

</body>

</html>
function draw(id){

    var canvas = document.getElementById(id);

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

    context.fillStyle = "#f1f2f3";

    context.fillRect(0,0,500,500);//背景的绘制

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

        context.beginPath();

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

        context.closePath();

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

        context.fill();

    }

}

效果图;

绘制一个圆形：
1。创建开始路径，context.beginPath()
2.创建图形路径，context.arc(x,y,radius,starAngle,endAngle,anticlockwise);
var radius = degress*Math.PI/180, Math.PI=180度
anticlockwise 是否顺时针
3.创建完成关闭路径，context.clasePath()
4。设置绘制样式然后调用绘制方法进行绘制，context.filllStyle = 'rgba(255,0,0,0.25)';context.fill();
 
 
绘制文字：
function draw(id){

    var canvas = document.getElementById(id);

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

    context.fillStyle = "#a0f";

    context.fillRect(0,0,800,300);//背景的绘制

    context.fillStyle = "#fff";//文字的颜色

    context.strokeStyle = "#fff";

    context.fillText("小柠檬呢",50,50);

    context.strokeText("小小的柠檬",50,100);

绘制动画

var i;

function draw(id){

    var canvas = document.getElementById(id);

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

    setInterval(painting,100);//设置动画的间隔时间。第一个参数表示执行动画的函数，第二个函数 间隔时间

    //通过不断地变化xy坐标来实现动画效果。clearRect(),将画布整体或者局部擦除。

    i=0;

}

function painting(){

    context.fillStyle = "#f00";

    context.fillRect(i,0,10,10);

    i=i+20;

}
 

h5学习-canvas绘制矩形、圆形、文字、动画的更多相关文章

  1. canvas 绘制 矩形 圆形

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

  2. canvas绘制矩形

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

  3. canvas 绘制矩形和圆形

    canvas绘制有两神方法:1).填充(fill)填充是将图形内部填满. 2).绘制边框 (stroke)绘制边框是不把图形内部填满,只是绘制图形的外框. 当我们在绘制图形的时候,首先要设定好绘制的样 ...

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

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

  5. html5 canvas绘制矩形和圆形

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

  6. h5 的canvas绘制基本图形

    文章地址:https://www.cnblogs.com/sandraryan/ canvas是一个标签,可用于绘制复杂图形,渲染效果比普通DOM快 某些低版本浏览器不支持 canvas 使用原生几乎 ...

  7. canvas 绘制矩形

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

  8. vue下canvas绘制矩形

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

  9. h5的canvas绘制方格（边框随即色）

    文章地址 https://www.cnblogs.com/sandraryan/ 两个循环绘制 <body> <canvas id="cv" width=&quo ...

随机推荐

  1. 解决UnicodeDecodeError: 'ascii' codec can't decode byte 0xe7 in position 12: ordinal not in range(128)的编码问题

    当我在运行一个基于scrapy的爬虫时出现UnicodeDecodeError: 'ascii' codec can't decode byte 0xe7 in position 12: ordina ...

  2. 使用PowerShell 创建SharePoint 站点

    使用PowerShell 创建SharePoint 站点         在SharePoint开发中,你应该学会使用PowerShell管理SharePoint网站.SharePoint Manag ...

  3. 纯JS写的一款记录事项的单页应用

    要点: 1.使用localStorage存储 2._change_record_progress函数以字符串作为参数,用eval执行这个参数 3.使用了jQuery自定义事件,便于数据改变时实时更新显 ...

  4. IO流（SequenceInputStream序列流--文件拆分与合并）

    一.文件拆分 1.将一个文件按照规定的大小进行分割成多个文件并将被分割详细信息保存至配置信息中 Properties 类表示了一个持久的属性集.Properties 可保存在流中或从流中加载,属性列表 ...

  5. Servlet学习总结，为理解SpringMVC底层做准备

    Servlet 一句话概括 :处理web浏览器,其他HTTP客户端与服务器上数据库或其他应用交互的中间层 Servlet 生命周期 : 1.类加载, 2.实例化并调用init()方法初始化该 Serv ...

  6. 浅谈JavaScript的字符串的replace方法

    JavaScript字符串提供了一个replace方法.replace方法可以接受两个参数:第一个参数可以使RegExp对象或者一个字符串,第二个参数可以是一个字符串或者一个函数.如果第一个参数是字符 ...

  7. BZOJ1087=Codevs2451=洛谷P1896&P2326互不侵犯

    1087: [SCOI2005]互不侵犯King Time Limit: 10 Sec  Memory Limit: 162 MBSubmit: 2885  Solved: 1693[Submit][ ...

  8. 云Hbase数据库在亿方云实践之路

    本文主要先介绍了亿方云,进而谈及了数据架构,着重分析了HBase实践等 2017云栖大会HBase专场,亿方云科技CTO 王成军带来HBase在亿方云客户端同步系统中的应用实践的演讲.本文主要先介绍了 ...

  9. C项目实践--俄罗斯方块（2）

    在VS中新建win32 Application Proj,选择Empty ,完成TetrisWin项目创建.新建tetris.c和tetris.h两个文件,打开tetris.h文件. 首先要包括的是可 ...

  10. anaconda tensorflow tflearn 自动安装脚本 anaconda使用-b可以非交互式安装

    install_dir=/usr/local/anaconda3 DIR="$( cd "$( dirname "${BASH_SOURCE[0]}" )&qu ...