在html5中可以使用canvas标签在画布上画图,先直接上代码,这篇文章先简单介绍一下canvas的使用方法,简单画几个圆,矩形,三角形,写字。
在代码中均给出了注释,在这里特别强调的一点是:使用canvas画图时有时候必须beginPath和colsePath,但有时不需要,为了防止出现问题,可以在每次重新画一个图时重新开启路径,画完后关闭路径。
这些代码是在猎豹浏览器上实现的,有些浏览器可能不支持。
<!DOCTYPE html>
<meta charset="utf-8">
<html>
<body>
<canvas width="500" height="500" id="canvas" style="background:yellow">
您的浏览器不支持canvas
</canvas>
<script>
//获取画布
var canvas=document.getElementById('canvas');
//alert(canvas);
//设置绘图环境
var cxt=canvas.getContext('2d');
//画一条线段
//开始新路径,第一笔可以不写
cxt.beginPath();
//设置画笔宽度
cxt.lineWidth=4;
//设置画笔颜色
cxt.strokeStyle="red";
//笔从哪开始画
cxt.moveTo(20,20);
//给出终点
cxt.lineTo(100,20);
//开始画
cxt.stroke();
//封闭路径
cxt.closePath();
//画空心圆
//开始新路径
cxt.beginPath();
//路径函数 x,y,r,角度范围,顺时针/逆时针
cxt.arc(100,100,50,0,360,false);
cxt.stroke();
cxt.closePath();
//画实心圆
cxt.beginPath();
//设置填充颜色
cxt.fillStyle="blue";
cxt.arc(100,200,50,0,360,false);
//实心
cxt.fill();
//在画个圆,不填充,加边框,可不画
cxt.stroke();
cxt.closePath();
//画矩形
//矩形函数 x,y,长宽
cxt.beginPath();
cxt.rect(200,100,50,60);
cxt.stroke();
cxt.closePath();
//其他方法
cxt.beginPath();
cxt.strokeRect(200,190,120,20);
cxt.closePath();
//实心矩形
cxt.beginPath();
cxt.rect(200,220,50,50);
cxt.fill();
cxt.closePath();
//其他方法
cxt.fillRect(200,280,50,50);
//写字
cxt.font="40px 黑体 ";
//实心字
cxt.fillText("暗伤无痕",300,50);
//空心字
//将笔触调细
cxt.lineWidth="1";
cxt.strokeText("暗伤无痕",300,100);
//将图片画到画板上 猎豹不支持
var img=new Image();
img.src="1.jpg";
cxt.drawImage(img,300,400,100,100);
//画一个三角形
cxt.beginPath();
//移动至开始点
cxt.moveTo(300,100);
cxt.lineTo(300,200);
cxt.lineTo(350,150);
cxt.closePath();//三角形需要先闭合路径再画
//空心
//cxt.stroke();
//实心
cxt.fill();
//旋转图片
//设置旋转环境
cxt.save();
//在异次元空间重置0,0点位置
cxt.translate(20,20);
//图片/x形状旋转
//设置旋转角度 参数是弧度,角度 0--360 弧度角度*Math.PI/180
//
cxt.rotate(-30*Math.PI/180);
//旋转线段
cxt.beginPath();
cxt.lineWidth=4;
cxt.moveTo(0,0);
cxt.lineTo(20,100);
cxt.stroke();
cxt.closePath();
//将旋转后的图片返回原画布
cxt.restore();
</script>
</body>
</html>
分享到:
相关推荐
html5 canvas画布里面圆球弹跳动画效果代码 html5 canvas画布里面圆球弹跳动画效果代码
canvas拼图游戏,基于html + canvas画布实现
Android 自定义画布canvas 实现绘制和清空画布功能,内含源码、apk
html5 canvas画布绘制圆形时钟代码
无限画布无限的html5画布描述提供一个接口,以垂直和水平无限地平移html5画布。 这通过创建无限增长的缓冲画布来工作,当使用.move([x, y])相对移动原点或绝对使用.setOrigin([x, y])相对移动原点时,可以调整画布的...
本教程适合H5 Canvas绘图的初学者阅读,丰富的范例能让读者快速掌握H5 Canvas画布的基本使用方法,能创建简单的动画,能检测捕捉鼠标动作。
html5 canvas画布实现液体波浪动画效果 html5 canvas画布实现液体波浪动画效果
HTML5 使用canvas画布做小球回弹动画,使绘画出来的小球沿着矩形的轨迹进行对称回弹,代码简单易懂,适合初学者练习。
html5 canvas 做画布,网页工具有画笔、粗细、颜色、橡皮擦、文字方块、上传图片、保存等功能,鼠标模拟手写输入,适合老师在线授课当黑板使用。
QML--Canvas画布实现矩形圆形等圈定
1.该脚本允许您直接在用户浏览器上对网页或其部分进行“截图”。屏幕截图基于 DOM,因此可能不是 100% 准确到真实表示,因为它不会制作实际的屏幕截图,而是根据页面上可用的信息构建屏幕截图。 2.它只能正确渲染它...
html5 canvas画布随机颜色变化特效 html5 canvas画布随机颜色变化特效
html5 canvas 制作流程图 EaselJS html5 canvas 制作流程图 EaselJS
node-canvas, node Canvas是一个Cairo支持的NodeJS画布实现 节点画布这是版本 2.0.0 -alpha的文档Alpha版本的2.0可以使用 npm install canvas@next 安装。有关从 1.x 升级到 2. x.的指南,请参阅变更日志版本 1.x ...
html2canvas-1.0.0-rc.4版本
ec-canvas 实现echart图表显示ec-canvas 实现echart图表显示ec-canvas 实现echart图表显示ec-canvas 实现echart图表显示ec-canvas 实现echart图表显示ec-canvas 实现echart图表显示ec-canvas 实现echart图表显示ec-...
微信小程序,画图板制作 画图,画布canvas,源码下载,
webgl-to-canvas2d 将 webgl 上下文或 webgl 画布转换为 2d 画布。用法webglToCanvas2d(gl, [canvas2d]) gl可以是使用 webglrenderingcontext 或 webglrenderingcontext 的画布。 canvas2d可以是画布或 ...
Html5-canvas之图片添加马赛克 Html5-canvas之图片添加马赛克
HTML5 canvas 元素的出现填补了这种不足,开发人员可以使用 JavaScript 脚本语言在 canvas 中进行一系列基于命令的图形绘制操作,本文将通过讲解如何使用 canvas 元素进行基本绘图操作,以及完成简单的动画和用户...