帮助中心
获取牛币
联系我们
关于我们
版权声明
素材牛首页
微博登录
QQ登录
微信扫码登录
注册
登录
新浪微博
QQ登陆
微信登录
热门搜索:
小程序
支付
Java
后台模板
上传
商城模板
jQuery
手机
Thinkphp
微信
Vue.js
首 页
网页特效
整站源码
PHP实例
网站模版
工具箱
常用代码
论坛
游戏源码
资源分享
当前位置:
首页
»
精选常用代码
» canvas实现田字格写字效果
canvas实现田字格写字效果
浏览:1302次
-
评论:1次
-
发布时间:2017-12-08
Html
Css
Js
此浏览器不支持canvas
清除
#canvas{display:block;margin:0 auto;} /*清除器样式*/ #controller{margin: 0 auto;} .op_btn{float: right;margin: 20px 0 0 0;border: 2px solid #aaa; width: 80px;height: 40px;line-height: 40px;font-size: 20px;text-align: center; border-radius: 5px;cursor: pointer;background-color: white; font-weight: bold;font-family:Arial;} .op_btn:hover{background: #def;} .clearfix{clear: both;} /*颜色按钮*/ .color_btn{ float: left; margin: 16px 0 0 10px; border: 5px solid white; width: 40px; height: 40px; border-radius: 5px; cursor: pointer; } .color_btn:hover{border:5px solid violet;} /*默认边框*/ .color_btn_selected{border:5px solid blueviolet;} #black_btn{background-color: black;} #blue_btn{background-color: blue;} #green_btn{background-color: green;} #red_btn{background-color: red;} #orange_btn{background-color: orange;} #yellow_btn{background-color: yellow;}
window.onload=function(){ //定义画布常量宽高(如果屏幕的大小-20比650小的话则在移动端,反之在pc端) var canvasWidth=Math.min(650,$(window).width()-20); var canvasHeight=canvasWidth; //默认鼠标按下为false var isMouseDown=false; //上一次鼠标记录的位置 var lastLoc={x:0,y:0}; //设置当前默认颜色 var strokeColor="black"; //获取画布 var canvas=document.getElementById('canvas'); //获取画布上下文 var context=canvas.getContext('2d'); //设置画布大小 canvas.width=canvasWidth; canvas.height=canvasHeight; //调用画布 drawGrid(); //动态设置 #controller宽度,让其适应手机屏幕 $(" #controller").css('width',canvasWidth+'px'); //清除画布操作 $('#clear_btn').click(function(){ //清除画布上的字体 context.clearRect(0,0,canvasWidth,canvasHeight); //重新绘画 drawGrid(); }); //颜色更换 $('.color_btn').click(function(e){ //选中按钮时移除掉边框 $('.color_btn').removeClass('color_btn_selected'); //再在当前按钮添加边框 $(this).addClass('color_btn_selected'); //把当前选中的按钮颜色赋值给画笔 strokeColor=$(this).css('background-color'); }); //鼠标在画布按下时 canvas.onmousedown=function(e){ e.preventDefault(); isMouseDown=true; //console.log("mouse Down!"); //e.clientX和e.clientY传入当前屏幕坐标 lastLoc=windowToCanvas(e.clientX,e.clientY); //alert(loc.x+","+loc.y); }; //鼠标在画布按下松开后 canvas.onmouseup=function(e){ e.preventDefault(); isMouseDown=false; //console.log("mouse Up!"); }; //鼠标离开画布时 canvas.onmouseout=function(e){ e.preventDefault(); isMouseDown=false; //console.log("mouse out!"); }; //鼠标移动在画布上时 canvas.onmousemove=function(e){ e.preventDefault(); if(isMouseDown){ //console.log("mouse move!"); var curLoc=windowToCanvas(e.clientX,e.clientY); //draw context.beginPath(); context.moveTo(lastLoc.x,lastLoc.y); context.lineTo(curLoc.x,curLoc.y); //设置画笔颜色 context.strokeStyle=strokeColor; //设置画笔粗细 context.lineWidth=10; //填补空白 context.lineCap="round"; //线条更加平滑 context.lineJoin="round"; //画线 context.stroke(); //当再画时,当前就是等于上一次开始的时候 lastLoc=curLoc; } }; //*屏幕坐标与canvas坐标的转换 function windowToCanvas(x,y){ //创建canvas所对应的包围盒 var bbox=canvas.getBoundingClientRect(); //返回屏幕x坐标减去bbox距离左边的间距就是canvas距离左边的位置,顶部同理左边 return{x:Math.round(x-bbox.left),y:Math.round(y-bbox.top)}; }; function drawGrid(){ //保存当前画布 context.save(); //设置画布颜色 context.strokeStyle="rgb(230,11,9)"; context.beginPath(); context.moveTo(3,3); context.lineTo(canvasWidth-3,3); context.lineTo(canvasWidth-3,canvasHeight-3); context.lineTo(3,canvasHeight-3); context.closePath(); context.lineWidth=6; context.stroke(); //四条直线 context.beginPath(); context.moveTo(0,0); context.lineTo(canvasWidth,canvasHeight); context.moveTo(0,canvasHeight); context.lineTo(canvasWidth,0); context.moveTo(0,canvasHeight/2); context.lineTo(canvasWidth,canvasHeight/2); context.moveTo(canvasWidth/2,0); context.lineTo(canvasWidth/2,canvasHeight); context.lineWidth=1; context.stroke(); context.restore(); } }
↑上面代码改变,会自动显示代码结果
jQuery调用版本:
2.1.4
<!doctype html><html><head><meta charset="utf-8"><title>canvas实现田字格写字效果-www.sucainiu.com</title><script src="https://libs.baidu.com/jquery/2.1.4/jquery.min.js"></script><style>
</style></head><body>
<script>
</script>
</body></html>
立即下载
收藏
积分说明:注册即送10牛币,每日签到可获得5牛币,成为VIP会员可永久免牛币下载!
充值积分
充值会员
更多说明»
代码描述:html5+canvas实现写字画图效果
html5+canvas实现屏幕写字效果
移动端柱状统计图效果
3D效果轮播图
讨论这个常用代码(1)
回答他人问题或分享心得会奖励牛币
Lv10 CTO
华***n
2017年12月09日
鼠标写字,永远辣么丑,哈哈,感谢分享
回复
文明上网,理性发言! 😉 阿里云幸运券,
戳我领取
发表评论
提交回复
我的积分余额:
0
已下载次数:
1302
所需牛币:
5
开始下载
牛币获取:
签到、评论、充值
» 在线充值
(10牛币=1元)
成为VIP可永久免积分下载全部常用代码
» 查看详情
VIP
客服
签到
充值