html5画布作品,HTML5 canvas画布

这里创建canvas标签，并定义其id为mycanvas，便于javascript绘图时获取该标签对象。

再看javascript绘图部分：

var c=document.getelementbyid("mycanvas");

var cxt=c.getcontext("2d");

cxt.fillstyle="#ff0000";

cxt.fillrect(0,0,200,200);

第一句getelementbyid，通过canvas标签的id获取canvas对象。

第二句getcontext，获取context对象。

第三句调用context对象的方法fillstyle，即填充其颜色。

第四句调用context对象的fillrect方法指定填充的区域。

canvas的其他实例

直线

var c=document.getelementbyid("mycanvas");

var cxt=c.getcontext("2d");

cxt.moveto(10,10);

cxt.lineto(150,50);

cxt.lineto(10,50);

cxt.stroke();

运行结果如下：

圆

var c=document.getelementbyid("mycanvas");

var cxt=c.getcontext("2d");

cxt.fillstyle="#ff0000";

cxt.beginpath();

cxt.arc(70,18,15,0,math.pi*2,true);

cxt.closepath();

cxt.fill();

运行结果如下：

渐变

var c=document.getelementbyid("mycanvas");

var cxt=c.getcontext("2d");

var grd=cxt.createlineargradient(0,0,175,50);

grd.addcolorstop(0,"#ff0000");

grd.addcolorstop(1,"#00ff00");

cxt.fillstyle=grd;

cxt.fillrect(0,0,175,50);

效果如下：

图像

var c=document.getelementbyid("mycanvas");

var cxt=c.getcontext("2d");

var img=new image();

img.src="1.png";

img.οnlοad=function(e){

cxt.drawimage(img,0,0);

}

cxt.drawimage(img,0,0);

注意，一定要给img添加onload事件，否则图片不显示。

其中，1.png为自己找的图片素材。打开页面可以看到图片显示在canvas画布中了。我的运行效果如下，图片百度随便找的，凑合看~~

html5画布作品,HTML5 canvas画布相关推荐

html5画布作品,HTML5 Canvas 画布(示例代码)
一.Canvas是什么? canvas,是一个画布,canvas元素用于在网页上绘制图形. canvas 拥有多种绘制路径.矩形.圆形.字符以及添加图像的方法. 二.创建Canvas元素加上基本的属 ...
html5毕业设计作品,html5毕业设计.doc
html5毕业设计 html5毕业设计篇一:[毕业论文]基于HTML5 CSS3的相册设计与实现摘要在当今社会,相册影像已成为人们生活和工作中日以追求的物质和精神需求,婚纱影像.儿童写真.个人 ...
从0开始canvas系列一 --- canvas画布
从0开始canvas系列从0开始canvas系列一 - canvas画布从0开始canvas系列二 - 文本和图像从0开始canvas系列三 - 图像像素级操作从0开始canvas系列四 - ...
canvas画布制作签名
使用canvas画布绘制签名,可撤回上一步.重新绘画.保存签名到电脑,先看效果.... 一.基本结构 <template><div class="signature&quo ...
【Java AWT 图形界面编程】使用鼠标滚轮缩放 Canvas 画布中绘制的背景图像 ( 绘制超大图像 + 鼠标拖动 + 鼠标滚轮缩放 + 以当前鼠标指针位置为缩放中心示例 )
文章目录一.鼠标滚轮缩放的中心点设置为当前鼠标中心点 - 要点分析 1.保存当前鼠标指针指向的位置 2.根据鼠标指针指向的位置以及比例重新计算图片位置二.绘制超大图像 + 鼠标拖动 + 鼠标滚轮缩 ...
用html5的canvas画布绘制贝塞尔曲线
查看效果:http://keleyi.com/keleyi/phtml/html5/7.htm 完整代码: <!DOCTYPE html PUBLIC "-//W3C//DTD XHT ...
使用HTML5的Canvas画布来剪裁用户头像
日期:2013-5-23 来源:GBin1.com 本文来自极客标签社区用户webgeek的一个在线HTML5web开发小技巧,帮助你使用html5的画布功能来切割用户上传的大头照. 在线调试例如 ...
html5 canvas图表,Chart.js基于Canvas画布的HTML5统计图表库 - 资源分享
Chart.js 是一个简单.面向对象.为设计者和开发者准备的图表绘制工具库.可以绘制柱状图.热点图.曲线图等,使用HTML5中的Canvas画布,支持原生的和jQuery的调用方法. 特点 6种图表 ...
HTML5之canvas画布教你绘画小黄人
HTML5之canvas画布教你绘画小黄人 Canvas画布:顾名思义绘画的基础,也是一幅画作的根.同样,我们学习技术也需要一步步往上走立好自己根,才能更好的成长.有一些东西总不能完美,但我们都有追求 ...

html5画布作品,HTML5 canvas画布

html5画布作品,HTML5 canvas画布相关推荐

最新文章

热门文章