绘制矩形
<!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. 聚合类新闻client产品功能点详情分析

    产品功能点 功能 今日头条 百度新闻 鲜果 ZAKER 媒体订阅 × √ ★ ★ 个性化内容推荐 ★ √ × × 个性化订阅(RSS) × × ★ × 视频新闻 × × × × 评论盖楼 √ √ √ ...

  2. E. Dreamoon and Strings（Codeforces Round #272)

    E. Dreamoon and Strings time limit per test 1 second memory limit per test 256 megabytes input stand ...

  3. 【转】TestNG常用注解

    http://blog.csdn.net/d6619309/article/details/52435084 TestNG的注解大部分用在方法级别上.常用的注解列举如下: 1. Before类别和Af ...

  4. LuaInterface简单介绍

    LuaInterface简单介绍 Lua是一种非常好的扩展性语言.Lua解释器被设计成一个非常easy嵌入到宿主程序的库.LuaInterface则用于实现Lua和CLR的混合编程. (一)Lua f ...

  5. struts2的文件上传机制

    Struts2的上传(基本流程例如以下) 1.Struts2默认採用了apache commons-fileupload 2.Struts2支持三种类型的上传组件 3.须要引入commons-file ...

  6. vsCode 常用快捷键（mac 版）

    光标多行显示: commond+Alt+topArrow/downArrow 查找:commond+F 查找并按顺序切换下一个:commond+G 跳转到某一行: ctrl+G 输入行号跳转 跳转到某 ...

  7. 02-Swift学习笔记-元组类型

    02-Swift学习笔记-元组类型 元组类型由N个任意类型的数据组成(N>=0) 元组类型的数据称为"元素" eg var size = (x:100 , y:100) si ...

  8. 2016/2/26 jQuery的技术 1，安装 2，语法选择器$ 事件触发 3，常用jQuery函数

    在<网页制作Dreamweaver(悬浮动态分层导航)>中,运用到了jQuery的技术,轻松实现了菜单的下拉.显示.隐藏的效果,不必再用样式表一点点地修改,省去了很多麻烦,那么jQuery ...

  9. 区块链共识算法 PBFT（拜占庭容错）、PAXOS、RAFT简述

    共识算法 区块链中最重要的便是共识算法,比特币使用的是POS(Proof of Work,工作量证明),以太币使用的是POS(Proof of Stake,股权证明)使得算理便的不怎么重要了,而今PO ...

  10. 并不对劲的fhq treap

    听说很对劲的太刀流不止会splay一种平衡树,并不对劲的片手流为了反驳他,并与之针锋相对,决定学学高端操作. 很对劲的太刀流-> 据说splay常数极大,但是由于只知道splay一种平衡树能对序 ...