简单画板

刚学HTML5没多久,写了个简单画板,勿喷~

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
<title>Examples</title>
<meta name="description" content="">
<meta name="keywords" content="">
<link href="" rel="stylesheet">
<style>
    .color{
        padding: 10px;
    }
    #btnClear{
    /*    width: 50px;
        height: 20px;*/
        margin: 0 10px;
    }
    #con{
        background: #999;
    }
</style>
<script>
window.onload=function(){
    var oCon=document.getElementById(‘con‘);
    var cxt=oCon.getContext("2d");
var oBtn=document.getElementById(‘btnClear‘);
    oBtn.onclick=function(){
        cxt.clearRect(0, 0, 400, 400);
    }

    oCon.onmousedown=function(e){
        var oVal=document.getElementById(‘cVal‘).value;
        cxt.strokeStyle=oVal;
        var myX=e.layerX;
        var myY=e.layerY;
        cxt.beginPath();
        cxt.moveTo(myX, myY);
        document.onmousemove=function(e){
            var mX=e.layerX;
            var mY=e.layerY;
            cxt.lineTo(mX, mY);
            cxt.stroke();
        }
        document.onmouseup=function(){
            document.onmousemove=null;
            document.onmouseup=null;
        }
    }
}
</script>
</head>
<body>
    <div class="color">请选择画笔颜色:<input type="color" id="cVal"><button id="btnClear" >清除画板</button></div>
    <canvas id="con" width="400" height="400"></canvas>
</body>
</html>
时间: 2024-10-12 19:18:53

简单画板的相关文章

canvas - 简单画板

截图: Demo:Demo 上代码:. <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Document</title> <style> *{ margin:0;padding:0; } body{ } canvas{ background-color: #fff;border:1px sol

用jQuery将页面制成简单画板

$(function () { $(document).on('mousedown', function (e) { var e = e || window.event; $(document).on('mousemove', function (e) { var e = e || window.event; var x = e.pageX; var y = e.pageY; $('<div></div>').css({ 'position': 'absolute', 'width

iOS 制作一个简单的画板

制作简单画板 作为iOS初学者,在学习完UI的几个简单控件(UILable,UITextField,UIButton)之后,就可以制作一个简单的画图板demo,以下是具体制作流程(在MRC下),如有不足之处,还请各位大神们指教 0.0. 1.搭建界面,主要由UIButton,UITextField组成,底部的按钮是UITextField的一个自定义键盘(inputView) . - (void)viewDidLoad { [super viewDidLoad]; //创建菜单按钮 UIButto

用Java语言编写一个简易画板

讲了三篇概博客的概念,今天,我们来一点实际的东西.我们来探讨一下如何用Java语言,编写一块简易的画图板. 一.需求分析 无论我们使用什么语言,去编写一个什么样的项目,我们的第一步,总是去分析这个项目需要满足怎样的需求. 那么,画板需要满足怎样的需要呢?换句话说,在画板上,我们应该赋予它什么功能呢?从我们熟悉的画板来看,我们需要实现诸如铅笔.橡皮.喷枪.刷子的功能,我们可以画出一些规则的图形,比如直线.矩形.圆.最好我们还能调整画笔的颜色和粗细.以上,我们希望的是,当我们点击一个按钮的时候,我们

SignalR

SignalR 说明:开发的案例为Hub(集线器) 一.开发环境 VS2013  ,window10 二.步骤 打开vs创建一个新的解决方案,添加一个空的WebForm项目. 使用NuGet添加引用.命令:PM>  instal-package Microsoft.AspNet.SignalR 或者 工具->NuGet程序包管理器->管理解决方案的NuGet程序包,里搜索和添加 三.添加Default.aspx页面 页面中首先引用jquery 1.6.4 及以上版本库 添加引用jquer

OC画图

1.获取当前的画板 CGContextRef context = UIGraphicsGetCurrentContext(); 2.设置画笔的颜色 CGContextSetStrokeColorWithColor(context, [UIColor redColor].CGColor); CGContextSetRGBStrokeColor(context, 1, 0, 0, 1); //设置画笔的宽度 CGContextSetLineWidth(context, 20); //设置画笔的样式

JNLP(Java Web Start )(转)

JNLP(Java Network Launching Protocol )是java提供的一种可以通过浏览器直接执行java应用程序的途径,它使你可以直接通过一个网页上的url连接打开一个java应用程序. Java桌面应用程序以JNLP 的方式发布,如果版本升级后,不需要再向所有用户发布版本,只需要更新服务器的版本,这就相当于让java应用程序有了web应用的优点. JNLP文件具体说明编辑 <?xml version="1.0" encoding="UTF-8&q

iOS新闻应用源码,高仿今日头条源码等

iOS精选源码 城市列表选择 一款非常时尚的照片选择插件 优酷播放按钮动画 BRPickerView是iOS的选择器组件,主要包括:日期选择器.时... 选择位置坐下动画Demo BAButton 图片.文字.倒计时等 git 功能最全的 button 分类 企业级完整iOS项目-<新闻来了> 较为美观的多级展开列表 高仿今日头条6.2.6 Swift 简单画板的swift实现 iOS优质博客 创建一个私有的 Pods 详解 前言骚年,你听说过组件化吗?没有?但你一定玩过乐高玩具,乐高玩具本身

第一个SignalR案例

说明:开发的案例为Hub(集线器) 一.开发环境 VS2013  ,window10 二.步骤 打开vs创建一个新的解决方案,添加一个空的WebForm项目. 使用NuGet添加引用.命令:PM>  instal-package Microsoft.AspNet.SignalR 或者 工具->NuGet程序包管理器->管理解决方案的NuGet程序包,里搜索和添加 三.添加Default.aspx页面 页面中首先引用jquery 1.6.4 及以上版本库 添加引用jquery.signal