实验四使用CANVAS API画图

实验四使用CANVAS API画图
一、实验目的
1、体会HTML编程；
　　2、掌握Canvas绘图
二、实验内容

实现利用鼠标画图，如下效果，可以选择画笔颜色和粗细（分别简单预定义几种即可），其中，“工具”和“形状”两栏的功能可以不强求实现：

<!DOCTYPE html>
<html>
<head><meta charset="UTF-8"><title></title><style type="text/css">*{margin: 0;padding: 0;}body{background: gainsboro;}#cav{background: white;position: relative;}#sel{display: block;width: 1190px;height: 30px;background: white;padding: 5px;margin-top: 5px;margin-bottom: 5px;}</style><script type="text/javascript">window.onload = function(){//              获得画板var cav = document.getElementById("cav");
//              获得绘画环境var cv = cav.getContext('2d');
//              设置画笔默认颜色及粗细cv.lineWidth=10;//鼠标按下事件cav.onmousedown = function(e){ev = window.event||e;var s_l = ev.offsetX||ev.layerX;var s_t = ev.offsetY||ev.layerY;//开始绘制路径cv.beginPath();//画笔起始位置cv.moveTo(s_l,s_t);
//                  鼠标移动事件cav.onmousemov = function(e){var over_ev = window.event||e;var over_l = over_ev.offsetX||over_ev.layerX;var over_t = over_ev.offsetY||over_ev.layerY;//结束位置cv.lineTo(over_l,over_t);//绘制线条cv.stroke();}}//鼠标抬起事件cav.onmoueup = function(){//取消鼠标移动事件cav.onmouemove = null;},//颜色改变事件document.getElementById("ys").onchange = function(){cv.strokeStyle = this.value;},//改变粗细document.getElementById("cx").onchange = function(){var cx = this.value;cv.lineWidth = cx;document.getElementById("cx_txt").innerHTML = cx;}}</script>
</head>
<body>
<div id="sel">画笔颜色：<input type="color" name="" id="ys" value="" />画笔粗细：<input type="range" min="1" max="50" value="10" id="cx" /><span id="cx_txt">10</span>
</div>
<canvas id="cav" width="1200px" height="800px"></canvas>
</body>
</html>

实验四使用CANVAS API画图相关推荐

（四）Canvas API方法和属性汇总
canvas主要属性和方法方法描述 save() 保存当前环境的状态 restore() 返回之前保存过的路径状态和属性 createEvent() getContext() 返回一个对象,指 ...
实验四 javaAPI(预习报告)
面向对象--Java实验报告实验四:Java API 实验四 Java API(预习报告) <center> <strong>姓名:</strong> <u ...
python实训总结报告书_20172304 实验四python综合实践报告
20172304 实验四python综合实践报告姓名:段志轩学号:20172304 指导教师:王志强课程:Python程序设计实验时间:2020年5月13日至2020年6月14日实验分析本 ...
HTML5(五)——Canvas API
什么是 Canvas API? Canvas API(画布)提供了一个通过 javascript 和 html 的 canvas 元素来在网页上实时绘制图形的方式.可用于动画.游戏.图标.图片编辑等多 ...
20175221曾祥杰实验四《Android程序设计》
实验四<Android程序设计> 实验报告封面课程:Java程序设计班级:1752班姓名:曾祥杰学号:20175221 指导教师:娄嘉鹏实验日期:2019年5月13日实验时间: ...
HTML5 学习手笔二：canvas API 绘制树形图案A
上篇通过对canvas 画对角线,了解了一些canvas画图基本原理.现在可以利用HTML5 canvas API创建一个场景:带有长跑跑道的树林. 本篇大纲用canvas API绘制树木的树冠为 ...
html5 Canvas API
2.1 Canvas 概述 Canvas本质上是一个位图画布,其上绘制的图形是不可缩放的,不能像SVG图像那样可以被放大缩小.此外,用Canvas绘制出来的对象不属于页面DOM结构或者任何命名空间. ...
python编程成果_20192217 2019-2020-2 《Python程序设计》实验四报告
20192221 2019-2020-2 <Python程序设计>实验四报告课程:<Python程序设计> 班级:1922班姓名:程子轩学号:20192217 实验教师: ...
Canvas API详解
概述 Canvas API(画布)用于在网页实时生成图像,并且可以操作图像内容,基本上它是一个可以用JavaScript操作的位图(bitmap). 使用前,首先需要新建一个<canvas> ...
实验四 201771010101 白玛次仁
实验四类与对象的定义及第一部分:理论部分 Java类库中的LocalDate类位于Java.Time包中 1.用户自定义类: 2.静态域与静态方法: 3.方法参数 4.对象构造 5.包 6.类路径 ...

实验四使用CANVAS API画图

实验四使用CANVAS API画图相关推荐

最新文章

热门文章

实验四 使用CANVAS API画图

实验四 使用CANVAS API画图相关推荐

最新文章

热门文章

实验四使用CANVAS API画图

实验四使用CANVAS API画图相关推荐