绘制矩形
<!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. oracle授权、表备份、用户管理

    用户管理 创建用户: create user 用户名 identified by 密码; 修改用户密码: alter user 用户名 identified by 密码; 激活用户: alter us ...

  2. 一个关于MYSQL IFNULL的用法

    select a.receiveID,(a.num - IFNULL(b.num,0)) as num from (SELECT num,receiveID from dog_giftnumrecor ...

  3. POJ1195 Mobile phones 【二维树状数组】

    Mobile phones Time Limit: 5000MS   Memory Limit: 65536K Total Submissions: 14288   Accepted: 6642 De ...

  4. spring实战笔记6---springMVC的请求过程

    之前有一次在面试其中被问到了这个问题.当时说得不是非常清楚,有些细节的地方想不起来了.所以在这里从新回想和总结一下SpringMVC的起步.请求的运行过程. 在SpringMVC其中.跟请求(Requ ...

  5. Yii2 mongodb 扩展的where的条件增加大于 小于号

    1. mongodb的where中有比較丰富的 条件.例如以下: static $builders = [ 'NOT' => 'buildNotCondition', 'AND' => ' ...

  6. java类载入器——ClassLoader

    Java的设计初衷是主要面向嵌入式领域,对于自己定义的一些类,考虑使用依需求载入原则.即在程序使用到时才载入类,节省内存消耗,这时就可以通过类载入器来动态载入. 假设你平时仅仅是做web开发,那应该非 ...

  7. IDEA 使用方法快捷键

    Ctrl+Shift + Enter,语句完成“!”,否定完成,输入表达式时按 “!”键Ctrl+E,最近的文件Ctrl+Shift+E,最近更改的文件Shift+Click,可以关闭文件Ctrl+[ ...

  8. ABAP 读取服务器CSV文件到内表

    DATA: BEGIN OF gs_data , cola TYPE string, colb TYPE string, ... END OF gs_data, gt_data LIKE TABLE ...

  9. linux下nginx模块开发入门

    本文模块编写参考http://blog.codinglabs.org/articles/intro-of-nginx-module-development.html 之前讲了nginx的安装,算是对n ...

  10. android ndk环境搭建,如果是mac,请先装mac make编译器(可以使用Xcode进行安装)

    Android SDK:android-sdk-mac_86Android NDK: android-ndk-r4b-darwin-x86EclipseADTCDTANT搭建Android SDK开发 ...