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. iptables的设置

    一.filter表防火墙(过滤器) iptables -A ( INPUT OUTPUT ) -s 192.1680.1.200 -p ( TCP UDP ICMP ) -i ( eth0 eth1 ...

  2. 将日志写入EventLog

    将日志写入EventLog 面向Windows的编程人员应该不会对Event Log感到陌生,以至于很多人提到日志,首先想到的就是EventLog.EventLog不仅仅记录了Windows系统自身针 ...

  3. test知识

    内部测试SIT ——system integration testcase 用户测试UAT——user acceptance test SIT是集成测试UAT是验收测试从时间上看,UAT要在SIT后面 ...

  4. Python 日期格式化 及 schwartzian排序

    __author__ = 'root' import datetime import time import copy # 12/Dec/2012:23:59:50 # 12/Sep/2012:23: ...

  5. 【转】nodejs

    Node.JS + MongoDB技术讲座            云计算 + 大数据 = 未来. 在中国的云计算上基本上是一个概念,个人感觉与当初的SOA没有太大的区别,空泛的理论. 中小型开发的未来 ...

  6. [POJ 1742] Coins 【DP】

    题目链接:POJ - 1742 题目大意 现有 n 种不同的硬币,每种的面值为 Vi ,数量为 Ni ,问使用这些硬币共能凑出 [1,m] 范围内的多少种面值. 题目分析 使用一种 O(nm) 的 D ...

  7. LA 3998 Prime k-tuple

    题意:如果K个相邻素数p1,p2,p3.....pk满足pk-p1=s,称这些素数组成一个距离为s的素数K元组,输入a,b,k,s,输出区间[a,b]内距离为s的素数k元组的个数. 思路:先打到500 ...

  8. hdu 5128 The E-pang Palace

    http://acm.hdu.edu.cn/showproblem.php?pid=5128 题意:给定N个点,选出其中8个点组成两个矩形,使得两个矩形的面积和最大. 思路:找出所有的矩形,然后枚举, ...

  9. 单片机IO处理 电容触摸按键

    原理说明: 通过检测感应按键PAD的电容量变化来判断是否有触摸动作.当手指触摸PAD时,电容量增加,充放电时间变长. 本方案中利用M48的20个双向IO口实现了20个触摸按键,而且所用原器件最少.其中 ...

  10. COJ 0601&0602 动态规划（二）及加强

    未加强传送门0601:http://oj.cnuschool.org.cn/oj/home/addSolution.htm?problemID=571 加强传送门0602:http://oj.cnus ...