HTML5之canvas
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的更多相关文章
- 用html5的canvas画布绘制贝塞尔曲线
查看效果:http://keleyi.com/keleyi/phtml/html5/7.htm 完整代码: <!DOCTYPE html PUBLIC "-//W3C//DTD XHT ...
- HTML5在canvas中绘制复杂形状附效果截图
HTML5在canvas中绘制复杂形状附效果截图 一.绘制复杂形状或路径 在简单的矩形不能满足需求的情况下,绘图环境提供了如下方法来绘制复杂的形状或路径. beginPath() : 开始绘制一个新路 ...
- HTML5之Canvas时钟(网页效果--每日一更)
今天,带来的是使用HTML5中Canvas标签实现的动态时钟效果. 话不多说,先看效果:亲,请点击这里 众所周知,Canvas标签是HTML5中的灵魂,HTML5 Canvas是屏幕上的一个由Java ...
- HTML5 画布canvas元素
HTML5的canvas元素以及随其而来的编程接口Canvas API应用前景极为广泛.简单地说,canvas元素能够在网页中创建一块矩形区域,这块矩形区域可以成为画布,这其中可以绘制各种图形.可别小 ...
- HTML5 之Canvas绘制太阳系
<!DOCTYPE html> <html> <head> <title>HTML5_Canvas_SolarSystem</title> ...
- HTML5 中canvas支持触摸屏的签名面板
1.前言 最近实在是太忙了,从国庆之后的辞职,在慢慢的找工作,到今天在现在的这家公司上班大半个月了,太多的心酸泪无以言表,面试过程中,见到的坑货公司是一家又一家,好几家公司自己都只是上一天班就走了,其 ...
- 【HTML5】Canvas画布
什么是 Canvas? HTML5 的 canvas 元素使用 JavaScript 在网页上绘制图像. 画布是一个矩形区域,您可以控制其每一像素. canvas 拥有多种绘制路径.矩形.圆形.字符以 ...
- html5 之 canvas 相关知识(一)概念及定义
什么是 Canvas? HTML5 的 canvas 元素使用 JavaScript 在网页上绘制图像. 画布是一个矩形区域,您可以控制其每一像素. canvas 拥有多种绘制路径.矩形.圆形.字符以 ...
- HTML5之Canvas画布
先上代码: <canvas width="1000" height="800">浏览器不支持HTML5!</canvas> <sc ...
- HTML5之Canvas影片广场
HTML5之Canvas影片广场 1.设计源代码 <!DOCTYPE html> <head> <meta charset="utf-8" /> ...
随机推荐
- [walkthrough] 在Asp.net MVC6 RC里使用NLog，并且把配置集成到config.json
说明一下:本文基于随visual studio 2015 RC公开的DNX1.0.0-beta4,git上最新的aspnet的开发版本已经发生了很大变化. 首先,理论部分看[汤姆大叔的博客] 解读AS ...
- 对话Facebook人工智能实验室主任、深度学习专家Yann LeCun
对话Facebook人工智能实验室主任.深度学习专家Yann LeCun Yann LeCun(燕乐存),Facebook人工智能实验室主任,NYU数据科学中心创始人,计算机科学.神经科学.电子电气科 ...
- HDOJ 2096 小明A+B
Problem Description 小明今年3岁了, 现在他已经能够认识100以内的非负整数, 并且能够进行100以内的非负整数的加法计算. 对于大于等于100的整数, 小明仅保留该数的最后两位进 ...
- 《University Calculus》-chaper13-向量场中的积分-线积分
线积分: 基于二重积分和三重积分的引入,我们对于线积分的引入过程将会轻车熟路. 对于一根不均匀密度的铜丝,我们如何求其总质量?如下图. 类似二重积分和三重积分的引入,我们首先基于实际问题给出黎曼和的形 ...
- SRM 406(1-250pt, 1-500pt)
DIV1 250pt 题意:有几家宠物店,vecort<int>A表示每家宠物店含有小狗占小狗总数的百分比.现在要做扇形统计图统计每家店的小狗百分比,如下图,问作出来的扇形统计图中最多含有 ...
- Scrapy：Python的爬虫框架
网络爬虫,是在网上进行数据抓取的程序,使用它能够抓取特定网页的HTML数据.虽然我们利用一些库开发一个爬虫程序,但是使用框架可以大大提高效率,缩短开发时间.Scrapy是一个使用Python编写的,轻 ...
- 性能比较工具runstats
runstats能对做同一件事的两个不同方法进行比较,得出谁好一点.我们只需要提供两个不同方法,余下的事情都由runstats负责.runstats只是测量3个要素: 1. 耗用的时间. 2. 系统统 ...
- Info.plist与Prefix.pch修改文件位置遇到的问题及解决方法
如果要更改Info.plist与Prefix.pch文件实际路径,也就是实际文件的位置(不是在工程中的组织路径),需要到Build Settings中修改对应的配置,不然工程就找不到对应的Info.p ...
- Lucene的中文分词器IKAnalyzer
分词器对英文的支持是非常好的. 一般分词经过的流程: 1)切分关键词 2)去除停用词 3)把英文单词转为小写 但是老外写的分词器对中文分词一般都是单字分词,分词的效果不好. 国人林良益写的IK Ana ...
- 边走边学Nodejs (基础入门篇)
1.什么是Node.js Nodejs ,或者node, 是一个基于ChromeJavaScript执行时建立的平台.用于方便地搭建响应速度快.易于扩展的网络应用.Node.js 使用事件驱动, 非堵 ...