绘制矩形
<!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. [外文理解] DDD创始人Eric Vans:要实现DDD原始意图，必须CQRS+Event Sourcing架构。

    原文:http://www.infoq.com/interviews/Technology-Influences-DDD# 要实现DDD(domain drive  design 领域驱动设计)原始意 ...

  2. Project Euler：Problem 61 Cyclical figurate numbers

    Triangle, square, pentagonal, hexagonal, heptagonal, and octagonal numbers are all figurate (polygon ...

  3. leetcode：122. Best Time to Buy and Sell Stock II（java）解答

    转载请注明出处:z_zhaojun的博客 原文地址 题目地址 Best Time to Buy and Sell Stock II Say you have an array for which th ...

  4. JavaGUI应用程序打包及数字签名

    JavaGUI应用程序部署 JavaGUI程序发布分类: a.Applet:可以嵌入到浏览器中,通过网页的方式展示给用户 b.application :有两种发布方式 :打包成jar包通过bat的方式 ...

  5. 图像处理之基础---很好的一个快速比较两副图片是否相同的code 可用于公安鉴别

    转自Codeproject http://www.codeproject.com/dotnet/comparingimages.asp Public Enum CompareResult ciComp ...

  6. arm位清零bic指令

    (1)指令的语法格式 BIC{<cond>}{S} <Rd>,<Rn>,<shifter_operand> BIC(Bit Clear)位清零指令,将寄 ...

  7. bzoj 5457 城市

    题目大意: 树上每个点有种类$a_i$和数量$b_i$,求每个点的子树内数量最多的种类的数量和这个数量 思路: 显然是线段树合并裸题 学习一下$dsu \space on \space tree$ 主 ...

  8. python编写九九乘法表代码

    打印九九乘法表 代码: #!/usr/bin/env python # -*- coding: UTF-8 -*- # 项目二: # 1.要求:编写九九乘法表 # 2.分析: # 根据九九乘法表的样式 ...

  9. 解决UnicodeEncodeError: ‘ascii’ codec can’t encode characters in position xxx ordinal not in range(128)

    Python在安装时,默认的编码是ascii,当程序中出现非ascii编码时,python的处理常常会报这样的错UnicodeDecodeError: 'ascii' codec can't deco ...

  10. sql server 变量 字符串拼接

    参考:SQL server中null+字符串,isnull以及把查询结果赋给一个字符变量组成另一个查询语句  1.开始定义的字符串都为null.例如:declare @sql,那么@sql就是null ...