canvas的创建，canvas图片的绘制及图片的封装，矩形，矩形边框，圆，线的绘制。

JavaScript代码如下：main.js

/**

 * Created by zengkm on 15-9-1.

 */

    //初始化

var myworld=function(){

    console.log("输出一些东西");

    var canvas = document.getElementById("my_canvas");

    canvas.width="800";

    canvas.height="400";

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

    drawCanvas(context);

    for(var i=0;i<4;i++)

    {

        drawImg(context,"res/heh.png",200*i,50);

    }

}

//在canvas上绘图

var drawCanvas = function(ctx){

    //矩形绘制

    //参数：X坐标，Y坐标，宽，高

    ctx.fillStyle="#FFCC00";

    ctx.fillRect(200,150,100,100);

    //矩形边框绘制

    //参数：X坐标，Y坐标，宽，高

    ctx.strokeStyle ="FF0000";

    ctx.strokeRect(400,150,100,100);

    //圆的绘制

    //参数：X坐标，Y坐标，圆周半径，起始弧度，结束弧度，圆弧绘制方向bool值

    ctx.arc(50,200,50,(Math.PI/180)*0,(Math.PI/180)*360,false);

    ctx.fill();//园的绘制填充

    //线的绘制

    ctx.fillStyle ="ff89a";

    ctx.linePath =5;

    ctx.beginPath();//标识开始绘制

    ctx.moveTo(700,200);

    ctx.lineTo(600,200);

    ctx.stroke();//线的填充绘制

    ctx.closePath();//关闭绘制

}

//canvas图片绘制

var drawImg = function(ctx,srcurl,x,y){

    var img = new Image();

    img.src =srcurl;

    img.onload = function(){

        //参数：img对象，X坐标，Y坐标

        ctx.drawImage(img,x,y);

    }

}

window.onload = myworld();

HTML代码：index.html

<!DOCTYPE html>

<html>

<head>

    <meta charset="UTF-8">

    <title>canvas实现</title>

</head>

<body>

<canvas id="my_canvas" style="background-color: green" width="400" height="200"></canvas>

<script style="text/javascript" src="src/main.js"></script>

</body>

</html>

最终实现的效果，画布颜色为绿色，第一行循环绘制图片4张，第二行画圆，矩形，矩形边框，线。

HTML5之canvas的更多相关文章

  1. 用html5的canvas画布绘制贝塞尔曲线

    查看效果:http://keleyi.com/keleyi/phtml/html5/7.htm 完整代码: <!DOCTYPE html PUBLIC "-//W3C//DTD XHT ...

  2. HTML5在canvas中绘制复杂形状附效果截图

    HTML5在canvas中绘制复杂形状附效果截图 一.绘制复杂形状或路径 在简单的矩形不能满足需求的情况下,绘图环境提供了如下方法来绘制复杂的形状或路径. beginPath() : 开始绘制一个新路 ...

  3. HTML5之Canvas时钟(网页效果--每日一更)

    今天,带来的是使用HTML5中Canvas标签实现的动态时钟效果. 话不多说,先看效果:亲,请点击这里 众所周知,Canvas标签是HTML5中的灵魂,HTML5 Canvas是屏幕上的一个由Java ...

  4. HTML5 画布canvas元素

    HTML5的canvas元素以及随其而来的编程接口Canvas API应用前景极为广泛.简单地说,canvas元素能够在网页中创建一块矩形区域,这块矩形区域可以成为画布,这其中可以绘制各种图形.可别小 ...

  5. HTML5 之Canvas绘制太阳系

    <!DOCTYPE html> <html> <head> <title>HTML5_Canvas_SolarSystem</title> ...

  6. HTML5 中canvas支持触摸屏的签名面板

    1.前言 最近实在是太忙了,从国庆之后的辞职,在慢慢的找工作,到今天在现在的这家公司上班大半个月了,太多的心酸泪无以言表,面试过程中,见到的坑货公司是一家又一家,好几家公司自己都只是上一天班就走了,其 ...

  7. 【HTML5】Canvas画布

    什么是 Canvas? HTML5 的 canvas 元素使用 JavaScript 在网页上绘制图像. 画布是一个矩形区域,您可以控制其每一像素. canvas 拥有多种绘制路径.矩形.圆形.字符以 ...

  8. html5 之 canvas 相关知识(一)概念及定义

    什么是 Canvas? HTML5 的 canvas 元素使用 JavaScript 在网页上绘制图像. 画布是一个矩形区域,您可以控制其每一像素. canvas 拥有多种绘制路径.矩形.圆形.字符以 ...

  9. HTML5之Canvas画布

    先上代码: <canvas width="1000" height="800">浏览器不支持HTML5!</canvas> <sc ...

  10. HTML5之Canvas影片广场

    HTML5之Canvas影片广场 1.设计源代码 <!DOCTYPE html> <head> <meta charset="utf-8" /> ...

随机推荐

  1. operation 多线程

    2.Cocoa Operation 优点:不需要关心线程管理,数据同步的事情.Cocoa Operation 相关的类是 NSOperation ,NSOperationQueue.NSOperati ...

  2. CSS HACK的方法

    所有浏览器 通用 height: 100px; IE6 专用 _height: 100px; IE7 专用 *+height: 100px; IE6.IE7 共用 *height: 100px; IE ...

  3. 转:使用Mongo Connector和Elasticsearch实现模糊匹配

    原文来自于:http://www.csdn.net/article/2014-09-01/2821485-how-to-perform-fuzzy-matching-with-mongo-connec ...

  4. NYOJ 540

    为了给学弟学妹讲课,我水了一道题…… import java.util.Arrays; import java.util.Scanner; public class NYOJ540 { public ...

  5. 如何把iOS代码编译为Android应用

    新闻 <iPhone 6/6 Plus中国销量曝光:单月销量650万>:据iSuppli Corp.中国研究总监王阳爆料,iPhone 6和iPhone 6 Plus在国内受欢迎的情况大大 ...

  6. Children of the Candy Corn

    poj3083:http://poj.org/problem?id=3083 题意:给你一个迷宫,然后给你一个起点和终点,现在给你种规则,一种是先向左,无法向左则向前,无法向前则向右,否则则向后,另外 ...

  7. ios开发学习- 简易音乐播放器2 （基于iPhone4s屏幕尺寸）-- 歌词解析--plist文件应用--imageNamed图片加载耗内存

    声明:(部分图片来自网络,如果侵犯了您的权益请联系我,会尽快删除!) 又是音乐播放器,不过这次和上次不一样了,准确说这次更像播放器了,初学者不建议看这个,可以先看前面一个音乐播放器(1),当然 我没加 ...

  8. common tar command

    Compress tar -cvzf jy2653.2.tgz jy2653.2 Decompress tar -xvf jy2653.1.tgz

  9. Linux Kernel ‘skbuff.c’本地拒绝服务漏洞

    漏洞名称: Linux Kernel ‘skbuff.c’本地拒绝服务漏洞 CNNVD编号: CNNVD-201307-498 发布时间: 2013-07-24 更新时间: 2013-07-24 危害 ...

  10. wikioi3363支线剧情（挖个坑，不会做。。。）

    3363 支线剧情 题目描述 Description 宅男JYY非常喜欢玩RPG游戏,比如仙剑,轩辕剑等等.不过JYY喜欢的并不是战斗场景,而是类似电视剧一般的充满恩怨情仇的剧情.这些游戏往往都有很多 ...