求教怎么用canvas画图形当作按钮_aide吧_百度贴吧
&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&签到排名：今日本吧第个签到，本吧因你更精彩，明天继续来努力！
本吧签到人数：0成为超级会员，使用一键签到本月漏签0次！成为超级会员，赠送8张补签卡连续签到：天&&累计签到：天超级会员单次开通12个月以上，赠送连续签到卡3张
关注：26,814贴子：
求教怎么用canvas画图形当收藏
求教怎么用canvas画图形当作按钮
画好后设为按钮背景
画太麻烦,xml不是可以实现，边框，渐变，按下变色之类的效果
登录百度帐号推荐应用随笔 - 112&
文章 - 0&评论 - 2&trackbacks - 0
&!DOCTYPE html&
&meta charset="UTF-8"&
&title&canvas&/title&
&script type="text/javascript" src="../js/jQuery.js"&&/script&
&style type="text/css"&
width: 7rem;
margin: .25rem 0 0 1.5rem;
border: 1px solid black;
display: block;
&canvas id="canvas" width="1000" height="600"&&/canvas&
&script type="text/javascript"&
* rem 布局初始化
$('html').css('font-size', $(window).width()/<span style="background-color: #f5f5f5; color: #);
* 获取 canvas 画布
* 获取 canvas 绘图上下文环境
var canvas = $('#canvas')[<span style="background-color: #f5f5f5; color: #];
var cxt = canvas.getContext('<span style="background-color: #f5f5f5; color: #d');
var balls = [];
* 事件交互, 点击事件为例
* isPointInPath(横坐标, 纵坐标)
for(var i = <span style="background-color: #f5f5f5; color: #; i & <span style="background-color: #f5f5f5; color: #; i++){
var ball = {
X: Math.random()*canvas.width,
Y: Math.random()*canvas.height,
R: Math.random()*<span style="background-color: #f5f5f5; color: # + <span style="background-color: #f5f5f5; color: #
balls[i] =
$("#canvas").click(function(){
//标准的获取鼠标点击相对于canvas画布的坐标公式
var x = event.pageX - canvas.getBoundingClientRect().
var y = event.pageY - canvas.getBoundingClientRect().
for(var i = <span style="background-color: #f5f5f5; color: #; i & balls. i++){
cxt.beginPath();
cxt.arc(balls[i].X, balls[i].Y, balls[i].R, <span style="background-color: #f5f5f5; color: #, Math.PI*<span style="background-color: #f5f5f5; color: #);
if(cxt.isPointInPath(x, y)){
cxt.fillStyle = "red";
cxt.fill();
function draw(){
cxt.fillStyle = "blue";
for(var i = <span style="background-color: #f5f5f5; color: #; i & balls. i++){
cxt.beginPath();
cxt.arc(balls[i].X, balls[i].Y, balls[i].R, <span style="background-color: #f5f5f5; color: #, Math.PI*<span style="background-color: #f5f5f5; color: #);
cxt.fill();
阅读(...) 评论()上一篇Canvas的博文写完后，有位朋友希望能对Canvas绘制出来的图像进行点击、拖拽等操作，因为Canvas绘制出的图像能很好的美化。好像是想做炉石什么的游戏，我也没玩过。
Canvas在我的理解中就好像在一张画布上绘制图像，它只能看到却&摸&不到，那要如何进行操作呢。我不知道网上是怎么做的，这里用自己的想法做了个DEMO分享给大家。
虽然Canvas不能拖拽，但div可以拖拽，那怎么把二者结合起来呢。初步想法是将一个与Canvas图像大小差不多的div覆盖在其上，在拖拽div时将获取的光标坐标修正后传给Canvas绘制函数并刷新图像的位置。
既然要覆盖，先做些准备工作：
1.将div与Canvas画布均position:absolute，否则无法重叠。
2.将div的z-index值设置大点，保证其在Canvas画面之上。
准备工作完成后，我们先来看div的拖拽：
var divObj=document.getElementById("cover");
var moveFlag=false;
divObj.onmousedown=function(e){
moveFlag=true;
var clickEvent=window.event||e;
var mwidth=clickEvent.clientX-divObj.offsetL
var mheight=clickEvent.clientY-divObj.offsetT
document.onmousemove=function(e){
var moveEvent=window.event||e;
if(moveFlag){
divObj.style.left=moveEvent.clientX-mwidth+"px";
divObj.style.top=moveEvent.clientY-mheight+"px";
divObj.onmouseup=function(){
moveFlag=false;
来解读下这段代码：首先获取div对象，设置拖拽标志moveFlage,当onmousedown时为true表示可以拖动，当onmouseup时为false表示不能拖动了。
var clickEvent=window.event||e;
var mwidth=clickEvent.clientX-divObj.offsetL
var mheight=clickEvent.clientY-divObj.offsetT
这三行代码是为了修正光标位置。当点击时，记录下光标在div上的位置。mwidth和mheight表示光标落点相对于div左边和上边的距离。如果不加修正：
这就是不加修正的结果，当光标点下时，div的坐标即左上角会与光标坐标一致。
点击时光标总会&粘&在div某点上。
接下来绘制图片：
首先定义全局变量X和Y，它们是为了实时更新图像的绘制坐标。
var ctx=document.getElementById("myCanvas").getContext("2d");
var img=document.getElementById("myImg");
function drawImg(){
ctx.clearRect(0,0,);
ctx.beginPath();
ctx.drawImage(img,X,Y);
ctx.closePath();
ctx.stroke();
window.onload=function(){
setInterval(drawImg,1);
获取&画笔&，获取图片对象。这里setInterval循环执行绘制图片的函数，以刷新图片的位置，setInterval的间隔值越小，拖拽起来越&流畅&。
同时别忘了clearRect，当图片移动到下一个位置时，清除上一个位置的图片，参数为Canvas画布的坐标和尺寸。
在拖拽时将修正后的光标坐标传给X、Y：
X=moveEvent.clientX-
Y=moveEvent.clientY-
最后加上div和图像的活动范围：
if(moveEvent.clientX&=mwidth){
divObj.style.left=0+"px";
if(parseInt(divObj.style.left)+divObj.offsetWidth &=1000){
divObj.style.left=1000 - divObj.offsetWidth+"px";
X=1000 - divObj.offsetW
if(moveEvent.clientY&=mheight){
divObj.style.top=0+"px";
if(parseInt(divObj.style.top)+divObj.offsetHeight&=500){
divObj.style.top=500-divObj.offsetHeight+"px";
Y=500-divObj.offsetH
这个就看个人的要求了，注意是要同时限定div和图片的活动范围。为本例的画布大小，如果是在整个页面里活动就换成innerWidth或innerHeight。
彻底隐藏div看看效果：
最后说下点击事件，这里要注意的是在拖拽的过程中onmousedown与onmouseup二者就构成了一个click过程，但我们不希望在拖拽结束后触发点击事件。
这里有个比较简单的办法，定义一个clickFlag默认为false,当onmousedown时设为true，若进行了onmousemove事件时设为false。
在最后onmouseup时判断clickFlag的值，为true时才触发点击事件。也就是说当你按下鼠标时，只有不发现移动，松开鼠标时才会触发点击事件。
整理后的JS代码：
绘制图片坐标
var divObj=document.getElementById("cover");
var moveFlag=false;
//区别moueseup与click的标志
var clickFlag=false;
divObj.onmousedown=function(e){
moveFlag=true;
clickFlag=true;
var clickEvent=window.event||e;
var mwidth=clickEvent.clientX-divObj.offsetL
var mheight=clickEvent.clientY-divObj.offsetT
document.onmousemove=function(e){
clickFlag=false;
var moveEvent=window.event||e;
if(moveFlag){
divObj.style.left=moveEvent.clientX-mwidth+"px";
divObj.style.top=moveEvent.clientY-mheight+"px";
将鼠标坐标传给Canvas中的图像
X=moveEvent.clientX-
Y=moveEvent.clientY-
下面四个条件为限制div以及图像的活动边界
if(moveEvent.clientX&=mwidth){
divObj.style.left=0+"px";
if(parseInt(divObj.style.left)+divObj.offsetWidth &=1000){
divObj.style.left=1000 - divObj.offsetWidth+"px";
X=1000 - divObj.offsetW
if(moveEvent.clientY&=mheight){
divObj.style.top=0+"px";
if(parseInt(divObj.style.top)+divObj.offsetHeight&=500){
divObj.style.top=500-divObj.offsetHeight+"px";
Y=500-divObj.offsetH
divObj.onmouseup=function(){
moveFlag=false;
if(clickFlag){
alert("点击生效");
本例到此结束，更多功能大家有兴趣可以自己开发，感谢您的浏览，也感谢每个对我这菜鸟提意见的人。
阅读(...) 评论()JAVASCRIPT（6）
以三角形作为案例：
& &canvas id=&uitooltip& height=&5px& width=&5px&&&/canvas& //html中的标签；
//定义canvas的大小；可以是正方形和长方形；
& & & &window.tooltip = function(){
//定义全局函数；
& & & & & & var uitooltip= document.getElementById(&uitooltip&); &
& & & & & & var context = uitooltip.getContext(&2d&);
& & & & & & context.strokeStyle = &white&; &&
& & & & & & context.fillStyle = &white&;
& & & & & & context.lineWidth = 1; &
& & & & & & context.moveTo(2.5,0); &
& & & & & & context.lineTo(0,5); &
& & & & & & context.lineTo(5,5); &
//定义三角形大小；
& & & & & & context.closePath();
& & & & & & context.fill();
& & & & & & context.stroke();&
//调用方法；
&&相关文章推荐
* 以上用户言论只代表其个人观点，不代表CSDN网站的观点或立场
访问：77229次
积分：1184
积分：1184
排名：千里之外
原创：38篇
转载：22篇
(1)(1)(1)(6)(2)(3)(5)(11)(5)(5)(11)(9)