转载自【http://www.656463.com/article/332】
Canvas标签定义，并获得坐标；画矩形，定义颜色，透明度；画直线，定义连接，节点；画圆，定义弧度，节点；画渐变色，定义节点渐变效果；读入一张图片
示例代码
<!DOCTYPE html>
<head>
<meta charset=gbk>
<title>PHP100 HTML5视频教程-canvas</title>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js"></script>
</head>
<body>
<canvas id="mycanvas" width="500" height="500"
onmousemove="mousexy(event)"></canvas>
<div id="ds"></div>
<script type="text/javascript">
var c=document.getElementById("mycanvas");
var p100=c.getContext("2d");
p100.fillStyle="#FF0000"; //定义颜色
p100.fillRect(0,0,300,300); //定义矩形的大小
p100.fillStyle="rgba(0,0,255,0.5)"; //定义颜色，支持透明
p100.fillRect(200,200,500,500); //定义矩形大小
//========线======
p100.moveTo(10,10); //起始位置
p100.lineTo(150,50); //终止位置
p100.lineTo(10,50); //如果没有再次设置起始位置将从结束位置开始画
p100.stroke(); //结束图形
//=======圆=======
p100.fillStyle="blue"; //定义演示
p100.beginPath(); //从新开始画，防止冲突重叠
//x坐标，y坐标，直径，Math.PI是圆周率
p100.arc(200,200,30,0,Math.PI*2,true);
p100.closePath(); //结束画布，防止冲突重叠
p100.fill(); //结束渲染
//======颜色渐变====
//颜色渐变的起始坐标和终点坐标
var grd=p100.createLinearGradient(100,100,175,50);
//0表示起点..0.1 0.2 ...1表示终点，配置颜色
grd.addColorStop(0,"yellow");
grd.addColorStop(1,"blue");
p100.fillStyle=grd; //生成的颜色块赋值给样式
p100.fillRect(100,100,175,50); //设置色块
//=======图形载入=====
var img=new Image()
img.src="logo.png"
p100.drawImage(img,220,30);
//监视鼠标
function mousexy(n){
x=n.clientX;
y=n.clientY;
$("#ds").html("坐标: x轴"+x+" y轴"+y);
}
</script>
</body>
</html>
分享到：
相关推荐
QML--Canvas画布实现矩形圆形等圈定
ec-canvas 实现echart图表显示ec-canvas 实现echart图表显示ec-canvas 实现echart图表显示ec-canvas 实现echart图表显示ec-canvas 实现echart图表显示ec-canvas 实现echart图表显示ec-canvas 实现echart图表显示ec-...
Html5-canvas之图片添加马赛克 Html5-canvas之图片添加马赛克
代码片段： <body> <canvas id=c></canvas> [removed][removed] ; font:normal 14px/24px 'MicroSoft YaHei';">
基于HTML5-Canvas的画图板设计与实现.doc
这是一款基于HTML5 Canvas实现的彩色渐变背景动画效果，跟随鼠标移动的HTML5交互式渐变背景动画特效。
wxml-to-canvas 小程序内通过静态模板和样式绘制 canvas ，导出图片，可用于生成分享图等场景
html5 Canvas 画图板，学习使用html5 Canvas ，让你画画更轻松
使用Canvas进行鼠标画图和线程画线，创建一个Canvas，用鼠标在画布上乱画，可以设置画笔大小和颜色，开启线程会自动从屏幕顶部开始一行一行画线，直到画满整个屏幕
html5-canvas-loader.rar
node-canvas, node Canvas是一个Cairo支持的NodeJS画布实现 节点画布这是版本 2.0.0 -alpha的文档Alpha版本的2.0可以使用 npm install canvas@next 安装。有关从 1.x 升级到 2. x.的指南，请参阅变更日志版本 1.x ...
NULL 博文链接：https://luanxiyuan.iteye.com/blog/1986529
html5-canvas-web-图片涂鸦
拓展canvas画图的clearRect()方法，实现圆形区域清理画布
Web2.0带来的丰富互联网技术让所有人都享受到了技术发展和...本文详细分析了HTML5技术的简介和发展前景，并深入探讨了HTML5引入的核心标签Canvas元素，介绍了Canvas可以实现的主要功能，在此基础上实现了部分类似Win
APNG经过修改后，在QT，浏览器上可用的apng-canvas.js 参考博客使用：http://blog.csdn.net/ly305750665/article/details/77972415
本手册提供Html5--Canvas标签绘图的完全参考; 其中包括标准函数,数据结构及样式枚举等元素的使用说明; 注明了Html5-Canvas中文教程、源码、样例的资源地址；以及函数参考的日文网站；但是本手册只做为开发人员参考...
html5 canvas画布里面圆球弹跳动画效果代码 html5 canvas画布里面圆球弹跳动画效果代码
文字粒子效果，通过canvas side的开发
海报合成 canvas vue组件 二维码合成 页面走命令可以直接运行 合成海报 商城的海报也ok ......