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. bazel源码编译Tensorflow
  2. opencv2生成图像的梯度图
  3. in the java search_LeetCode第[33]题(Java):Search in Rotated Sorted Array
  4. IP地址的简单说明---Linux学习笔记
  5. AJAX Tookits -- ConfirmButton
  6. 集中管理:领导者,不能不考虑的几件事之——“挖”出来的无限可能
  7. django-模型类中的数据类型-添加中
  8. 以太坊geth区块链私链建立
  9. LeetCode(268)——缺失数字(JavaScript)
  10. [2019杭电多校第二场][hdu6599]I Love Palindrome String(回文自动机hash)
  11. 在腾讯实习的那段日子:不要在难受的时候选择 '逃避/离开'
  12. 现代控制理论课程实验三:一阶倒立摆的LQR控制器设计
  13. Termux字体大小调整
  14. ps切图后 JAVA开发_PS切图工具
  15. Oracle 日期相减获取年龄
  16. 看完这篇就够了,mac版本最新Camera Raw 15.1 新功能HDR详解
  17. 新家入住气味难忍 除去甲醛有妙招
  18. 在思科模拟器Cisco Packet Tracer实现自反ACL
  19. 吹捧“导师师娘”的论文获得国自然基金资助?中科院和作者都回应了!
  20. Java 之 覆写, 重载, 隐藏, 遮蔽, 遮掩

热门文章

  1. 苹果手机话筒声音小怎么办_苹果xr听筒声音小,苹果xr通话声音小
  2. 本地计算机策略打不开怎么办,我的电脑的本地组策略编辑器怎么打不开?
  3. 全栈必备 存储基础
  4. 复制瑞幸模式,出局的陆正耀再创业,要先开500家面馆
  5. 网络数据采集技术snmp/netflow/sflow/network telemetry简介
  6. 分散的无纸记录仪如何通过无线集中实现短信报警
  7. java实现心形图案|桃心_java实现心形图案
  8. C/C++如何调用Java
  9. 正态分布的应用——基于偏度系数解释发展水平
  10. stm32使用各种传感器的教程