绘制矩形
<!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. Jenkins系列之-—05 节点配置

    一.节点配置 1. 进入[系统管理]-[节点管理]-[新建节点],录入节点名,选择Permanent Agent,下一步录入节点详细配置信息,如下: Name:节点名称 Description:节点描 ...

  2. Visual Studio 2012 Fakes框架测试驱动开发TDD教程

    一.前言 最近团队要尝试TDD(测试驱动开发)的实践,很多人习惯了先代码后测试的流程,对于TDD总心存恐惧,认为没有代码的情况下写测试代码时被架空了,没法写下来,其实,根据个人实践经验,TDD并不可怕 ...

  3. jquery全选,取消全选

    近期项目又用到了这个全选和取消全选的操作. 曾经总是自己写纯JS.如今既然知道怎么写了.那怎样用JQ写得更简洁呢.这样也能学到新的东西.假设乎百度一下果然发现了好东东.感谢OSC的iuhoay. 代码 ...

  4. Matplotlib绘图基础

    import matplotlib.pyplot as plt import numpy as np #绘图流程 x=np.linspace(-1,1,100) y=x**2 plt.plot(x,y ...

  5. 【网站支付PHP篇】thinkPHP集成支付宝支付（担保交易）

    目录 系列说明 开发环境 部署支付宝 支付请求 支付宝返回处理 系列说明 最近在帮朋友的系统安装支付模块(兑换网站积分),现在总结一些开发心得,希望对大家有用.这个系列会讲以下第三方支付平台的集成: ...

  6. vs2013发布网站提示 “未能将文件**复制到**”

    原因:年久失修,原来在项目中的一些文件给删掉或移除了 解决方法:打开.csproj文件(记事本打开),把提示的文件给删除掉.

  7. 在ubuntu18.0下安装qt4.7以及qt-creator安装过程中遇到的坑

    最近的嵌入式Linux系统上要做课程设计= =要用贼老贼老的qt4.7,配环境踩坑都费了我1天时间.....所以记录下来,希望能给和我遇到相同问题的朋友一点帮助 apt-get install g++ ...

  8. Mac下安装manen

    下载好maven,放到特定目录下: 打开终端: 进入根目录: cd ~ 创建文件.bash_profile: vi .bash_profile 编辑文件添加内容 MAVEN_HOME=/Users/c ...

  9. 函数 devm_kzalloc()【转】

    本文转载自:http://blog.csdn.net/jgw2008/article/details/52691568 函数 devm_kzalloc() 和kzalloc()一样都是内核内存分配函数 ...

  10. 【idea】idea快捷键

    Alt+回车 导入包,自动修正 alt+shift+↑  向上sout输出 psvm主函数 fori for Ctrl+N   查找类Ctrl+Shift+N 查找文件Ctrl+Alt+L  格式化代 ...