html

js

var canvas=document.getElementById('myCanvas');

var context=canvas.getContext("2d");

context.fillStyle="#ccc";

context.fillRect(112,337,257,128);

//填充文字

context.font = "30px 微软雅黑";

context.fillStyle="#000";

context.fillText("摩擦有惊喜",159,400);

//画线

drawOn=false;page_x=0;page_y=0;

canvas.onmousedown = function(e){

drawOn = true;

page_x = e.pageX-canvas.offsetLeft;

page_y = e.pageY-canvas.offsetTop;

context.lineCap = "round";

}

canvas.onmousemove = function(e){

if( drawOn ){

context.beginPath();

context.moveTo( page_x,page_y );

page_x = e.pageX-canvas.offsetLeft;

page_y = e.pageY-canvas.offsetTop

context.lineTo( page_x,page_y );

context.stroke();

context.globalCompositeOperation="destination-out"

context.lineWidth="20";

}

}

canvas.onmouseup = function(){

drawOn = false;

}

java刮刮乐,Canvas实现简单刮刮乐效果相关推荐

  1. canvas实现简单的刮刮乐功能

    canvas实现刮刮乐效果 平时浏览一些购物网站常常有一些抽奖的环节它们就会使用一种刮刮乐的形式给用户发一些优惠券或者其它的一些奖品,对此突然产生了些许兴趣于是就琢磨着该如何实现,最终还是选择了can ...

  2. 在html利用canvas蚂蚁,html5 利用canvas实现简单的人物走动

    最近在学习html5,其中涉及到很关键的元素canvas-画布,在网上下载了一些游戏源代码,虽然能看懂,但是想单独地针对某个功能提取出来还是有难处的,于是乎自己又上网查找了一些例子,才将超级玛丽简单的 ...

  3. html刮奖特效,用CANVAS模拟一个简单的刮奖效果

    用CANVAS模拟一个简单的刮奖效果.html> * { padding: 0; margin: 0; } .box { position: relative; height: 400px; w ...

  4. java canvas 画图片_[Java教程][HTML5] Canvas绘制简单图片

    [Java教程][HTML5] Canvas绘制简单图片 0 2016-05-13 13:00:04 获取Image对象,new出来 定义Image对象的src属性,参数:图片路径 定义Image对象 ...

  5. java喷泉编码_好程序员Java教程分享使用JS实现简单喷泉效果

    原标题:好程序员Java教程分享使用JS实现简单喷泉效果 好程序员Java教程分享使用JS实现简单喷泉效果,最近,在教学生使用JS的基本操作,为了练习JS的基本作用,特地写了一个喷泉效果,代码如下: ...

  6. html根据字段制作曲线图,canvas制作简单的HTML图表,折线或者矩形统计(原创)

    插件描述:canvas制作简单的HTML图表,折线或者矩形统计 使用canvas制作简单的HTML图表,折线或者矩形统计. 使用canvas制作简单的HTML图表,折线或者矩形统计,简单而实用.图形由 ...

  7. 将Java程序变成可执行文件的一个简单方法

    将Java程序变成可执行文件的一个简单方法 运行Java程序(SWING或SWT的桌面程序)可以直接执行.class文件或将所有的.class文件及相关的其他文件压缩成.jar文件,然后使用javaw ...

  8. 【Java面试题】21 Java中的异常处理机制的简单原理和应用。

    [Java面试题]21 Java中的异常处理机制的简单原理和应用. 参考文章: (1)[Java面试题]21 Java中的异常处理机制的简单原理和应用. (2)https://www.cnblogs. ...

  9. java 配置信息_[Java教程]java 配置信息类 Properties 的简单使用

    [Java教程]java 配置信息类 Properties 的简单使用 0 2016-12-08 09:00:09 Properties :(配置信息类) 是一个表示持久性的集合 ,继承 Hashta ...

  10. WebGL(三)——学习Canvas及简单图形绘制

    WebGL(三)--学习Canvas及简单图形绘制 Canvas简介 canvas是HTML5新增的一个可以使用javascript脚本在其中绘制图像的HTML元素(容器),它可以用来制作图像.动画, ...

最新文章

  1. LeetCode周赛191
  2. 一篇文章,带你了解 “机器学习工程师” 必备技能图谱
  3. 一大波 Android 刘海屏来袭,全网最全适配技巧!
  4. springcloud学习计划
  5. 图文解释Glados自动签到免费获取天数(腾讯云函数serverless版)
  6. el表达式取值优先级
  7. 解决:Error response from daemon: manifest for xxx:latest not found: manifest unknown...
  8. mysql加锁6_MySQL优化(6):Mysql锁机制
  9. git(11)---Git的基础知识
  10. 利用函数求两个数的最大值
  11. hp电脑测试软件,HP惠普笔记本电池检测工具Battery Check V4.1.0.2中文官方版
  12. WMI遍历注册表(VBS编程)
  13. AtCoder Beginner Contest 245 A~E 题解
  14. [已解决]你的支付授权失败。请核对你的信息并重试,或尝试其他支付方式。请联系你的银行了解更多信息
  15. Apache 防盗链(Apache Anti-Leech)技术的简单实现
  16. python金融量化风险_Python量化:评估投资组合的收益率和风险
  17. 薛之谦一半的高潮用计算机弹怎么按,如何解读薛之谦的歌《一半》?
  18. css之如何清除浮动
  19. OSPFv2原理详解(基于RFC2328)+配置介绍+RFC2328翻译
  20. Scrapy--CrawlSpider

热门文章

  1. INTERVAL 用法
  2. Python自动化测试框架我到底应该学哪一个?
  3. 设计模式——软件设计的太极剑法
  4. edge启动页北hao123流氓绑定的其中一个解决方法
  5. 中考考试的指令广播_2019年初中学业水平考试广播指令
  6. 致远oa系统unix 服务器,致远oa服务器设置
  7. 虚拟机的安装以及红帽子企业版5安装
  8. 【其他】计蒜客 ICPC Pacific Northwest Regional Contest 2017 Gym-101652X Star Arrangements
  9. 51Talk-Level 7 Unit 2 L4
  10. 手机浏览器打开微信app的方法