canvas day3

最新推荐文章于 2022-02-16 19:00:56 发布
最新推荐文章于 2022-02-16 19:00:56 发布
阅读量170 收藏
点赞数
分类专栏： css
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/qin_yulinling/article/details/77514864
版权

27、纠正canvas day2 26

旋转90度是指原画布坐标旋转90度，并在新的坐标内绘制矩形1，并将其调整至适当的位置使用户可见，而非将原画布内的矩形1旋转90度

28、冒泡

（1）点击div3

点击div2

点击div1

（2）div3阻止冒泡

点击div3

点击div2

点击div1

div2阻止冒泡

点击div3

点击div2

点击div1

div1阻止冒泡

点击div3

点击div2

点击div1

注：btn.addEventListener("click",function(){},true)

第三个参数省略时，默认为false，

false:冒泡阶段触发

true:捕获阶段触发

特别注意：ture/false仅表示何时触发，与阻止冒泡无关

 

 

qin_yulinling
关注
  • 0
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
canvas学习day3——工厂模式
weixin_41571938的博客
04-29 96
工厂模式（Factory Pattern）是 Java 中最常用的设计模式之一。这种类型的设计模式属于创建型模式，它提供了一种创建对象的最佳方式。 <script> function Person( name, age ) { this.name = name; this.age = age; } // 工厂 // 工厂模式相当于省去new关键字 function g
canvas学习day3——加载图片loadImage函数，理解回调函数
weixin_41571938的博客
05-02 1346
回调函数 回调函数理解 你到一个商店买东西，刚好你要的东西没有货，于是你在店员那里留下了你的电话，过了几天店里有货了，店员就打了你的电话，然后你接到电话后就到店里去取了货。在这个例子里，你的电话号码就叫回调函数，你把电话留给店员就叫登记回调函数，店里后来有货了叫做触发了回调关联的事件，店员给你打电话叫做调用回调函数，你到店里去取货叫做响应回调事件 1 2 3 按顺序排列， 先使用1 3 然后再回头去用2 在这里2就是回调函数 简单的一句话：被传入的、后又被调用的函数就称为回调函数。 最常见使用回调函数是
canvas作图 Day1
乾复道
12-20 207
canvas作图与echarts.js结合作图，此demo采用node.js+ejs+echart.js技术； 详细demo，可参考https://github.com/long861/echarts_ml  这是这篇文章的入口； 文件中则在view/first.ejs; 以后，如有类似学习性demo，本人将会把释义直接在文档中标注； &lt;!DOCTYPE html&gt; &...
canvas day1
qin_yulinling的博客
08-21 187
1、var canvas=document.querySelector("#canvas") canvas.width=600; canvas.height=600; canvas.style.border='1px solid red' //通过canvaas对象的属性来设置canvas绘画盒子的宽高 2、var pen=canvas.getContext('2d') //获取画笔 3...
day01-canvas标签
qq_45903009的博客
12-05 182
canvas标签 一：canvas标签的特点： ​ 1·该标签是H5的新标签，IE8及以下的浏览器不支持该标签 ​ 2·该标签只是图形的容器，必须通过脚本语言js来绘制图形 ​ 3·该标签内的所有文本都会在不支持该标签的浏览器中显示 ​ 4·应用场景：游戏 / 可视化数据 / 多媒体 / banner广告 二：canvas标签的使用: 使用获取到该标签 调用getContext(‘2d’)方法返回一个对象， 该对象提供了一些在画布进行2d绘图的属性和方法 getContext
canvas学习day3——四种调用方式
weixin_41571938的博客
04-29 108
1、函数调用 == window 2、方法调用 == 宿主 3、构造器 == 实例对象 4、上下文（间接调用） == 自由指定
canvas day2
qin_yulinling的博客
08-23 186
16、闭包： 当function里嵌套function时，内部的function可以访问外部function里的变量。 functionfoo(x) { vartmp=3; returnfunction(y) { alert(x+y+(++tmp)); } } varbar=foo(2);//bar 现在是一个闭...
Day 191/200 Canvas 复制图片的功能
xinghuowuzhao的博客
02-16 633
1、需求 想实现魔法棒功能；需要实现图片的Canvas像素级别的复制功能； 2、实现代码 <!-- * @Author: ArdenZhao * @Date: 2022-01-18 14:09:54 * @LastEditors: Do not edit * @LastEditTime: 2022-02-16 18:55:42 * @FilePath: /magic_wand/demo/8、canvasCopy.html --> <!DOCTYPE html> <ht
day-5-canvas绘图
NTeen的博客
12-08 215
目录 绘制长方形的两种方法 绘制圆形 绘制线段 绘制二次贝塞尔曲线 绘制三次贝塞尔曲线 绘制图片 绘制视频 绘制文字 绘制文字阴影 线性渐变 径向渐变 画布变换 重合显示状态 调用canvas图形库 <canvas width="500" heigh...
canvas day2.zip
12-21
欢迎来到我们的WEB前端学习视频！在这个视频系列中，我们将带你深入了解WEB前端开发的基础知识和实践技巧。 这个视频系列适合那些对于网页设计和开发有兴趣的初学者和入门者。无论你是想要成为一名专业的前端工程师...
canvas day1.zip
12-21
欢迎来到我们的WEB前端学习视频！在这个视频系列中，我们将带你深入了解WEB前端开发的基础知识和实践技巧。 这个视频系列适合那些对于网页设计和开发有兴趣的初学者和入门者。无论你是想要成为一名专业的前端工程师...
canvas如何绘制钟表的方法
12-14
本文介绍了canvas如何绘制钟表的方法，...var year,month,day,hour,second,minute; // 绘制表盘 function drawClockPie(){ ctx.beginPath(); ctx.lineWidth = 2; ctx.strokeStyle = '#333'; ctx.arc(150,150,146,0,
Canvas雨滴落在玻璃屏幕模糊背景动画效果特效代码
03-20
在这个“Canvas雨滴落在玻璃屏幕模糊背景动画效果特效代码”中，我们主要探讨的是如何利用Canvas和一个名为rainyday.js的插件来创建逼真的雨滴效果，同时提供两种不同的动画场景：雨滴倾斜落下和垂直落下的视觉体验...
canvas：画布动画
02-10
帆布 我每天尝试添加一个动画。 计划：带有WebGL，Three.js，GLSL，SVG，D3，GSAP的一些动画 —在最新的chrome版本中签入。 依存关系： 有用的YouTube频道： 有用的课程： ...文档，网站，指南： ...
个人单页简历素材-简约单页24.docx
07-23
【简历模板】工作总结、商业计划书、述职报告、读书分享、家长会、主题班会、端午节、期末、夏至、中国风、卡通、小清新、岗位竞聘、公司介绍、读书分享、安全教育、文明礼仪、儿童故事、绘本、防溺水、夏季安全、科技风、商务、炫酷、企业培训、自我介绍、产品介绍、师德师风、班主任培训、神话故事、巴黎奥运会、世界献血者日、防范非法集资、3D快闪、毛玻璃、人工智能等等各种样式的ppt素材风格。 设计模板、图片素材、PPT模板、视频素材、办公文档、小报模板、表格模板、音效配乐、字体库。 广告设计：海报，易拉宝，展板，宣传单，宣传栏，画册，邀请函，优惠券，贺卡，文化墙，标语，制度，名片，舞台背景，广告牌，证书，明信片，菜单，折页，封面，节目单，门头，美陈，拱门，展架等。 电商设计：主图，直通车，详情页，PC端首页，移动端首页，钻展，优惠券，促销标签，店招，店铺公告等。 图片素材：PNG素材，背景素材，矢量素材，插画，元素，艺术字，UI设计等。 视频素材：AE模板，会声会影，PR模板，视频背景，实拍短片，音效配乐。 办公文档：工作汇报，毕业答辩，企业介绍，总结计划，教学课件，求职简历等PPT/WORD模板。
【精美排版】中北大学嵌入式期末测验(完整).docx
07-23
嵌入式
毕业设计项目之基于Opencv的车牌识别系统项目源码
最新发布
07-23
毕业设计项目之基于Opencv的车牌识别系统项目源码 版本：python3.7.3，opencv4.0.0.21，numpy1.16.2，tkinter和PIL5.4.1.
stm32f407zgt6空白工程
07-23
此工程为stm32f407zgt6的空白工程，通过cmake方式来进行管理
Android Canvas 画一个钟表
04-04
以下是一个简单的Android Canvas绘制钟表的示例代码： ```java public class MyClockView extends View { private Paint mCirclePaint; private Paint mLinePaint; private Paint mTextPaint; private Paint mHourHandPaint; private Paint mMinuteHandPaint; private Paint mSecondHandPaint; private float mHour; private float mMinute; private float mSecond; public MyClockView(Context context) { super(context); init(); } public MyClockView(Context context, AttributeSet attrs) { super(context, attrs); init(); } public MyClockView(Context context, AttributeSet attrs, int defStyleAttr) { super(context, attrs, defStyleAttr); init(); } private void init() { mCirclePaint = new Paint(); mCirclePaint.setAntiAlias(true); mCirclePaint.setStyle(Paint.Style.STROKE); mCirclePaint.setStrokeWidth(5); mCirclePaint.setColor(Color.BLACK); mLinePaint = new Paint(); mLinePaint.setAntiAlias(true); mLinePaint.setStyle(Paint.Style.STROKE); mLinePaint.setStrokeWidth(3); mLinePaint.setColor(Color.BLACK); mTextPaint = new Paint(); mTextPaint.setAntiAlias(true); mTextPaint.setStyle(Paint.Style.FILL); mTextPaint.setTextSize(30); mTextPaint.setColor(Color.BLACK); mHourHandPaint = new Paint(); mHourHandPaint.setAntiAlias(true); mHourHandPaint.setStyle(Paint.Style.STROKE); mHourHandPaint.setStrokeWidth(8); mHourHandPaint.setColor(Color.BLACK); mMinuteHandPaint = new Paint(); mMinuteHandPaint.setAntiAlias(true); mMinuteHandPaint.setStyle(Paint.Style.STROKE); mMinuteHandPaint.setStrokeWidth(5); mMinuteHandPaint.setColor(Color.BLACK); mSecondHandPaint = new Paint(); mSecondHandPaint.setAntiAlias(true); mSecondHandPaint.setStyle(Paint.Style.STROKE); mSecondHandPaint.setStrokeWidth(3); mSecondHandPaint.setColor(Color.RED); // 获取当前时间 Calendar calendar = Calendar.getInstance(); mHour = calendar.get(Calendar.HOUR_OF_DAY); mMinute = calendar.get(Calendar.MINUTE); mSecond = calendar.get(Calendar.SECOND); } @Override protected void onDraw(Canvas canvas) { super.onDraw(canvas); // 获取控件宽高 int width = getWidth(); int height = getHeight(); // 计算圆的半径 int radius = Math.min(width, height) / 2 - 10; // 画圆 canvas.drawCircle(width / 2, height / 2, radius, mCirclePaint); // 画刻度线和数字 for (int i = 0; i < 12; i++) { canvas.save(); canvas.translate(width / 2, height / 2); canvas.rotate(i * 30); canvas.drawLine(0, -radius, 0, -radius + 30, mLinePaint); canvas.drawText(String.valueOf(i + 1), -10, -radius + 60, mTextPaint); canvas.restore(); } // 画时针 canvas.save(); canvas.translate(width / 2, height / 2); canvas.rotate(mHour * 30 + mMinute / 2); canvas.drawLine(0, 0, 0, -radius / 2, mHourHandPaint); canvas.restore(); // 画分针 canvas.save(); canvas.translate(width / 2, height / 2); canvas.rotate(mMinute * 6); canvas.drawLine(0, 0, 0, -radius * 3 / 4, mMinuteHandPaint); canvas.restore(); // 画秒针 canvas.save(); canvas.translate(width / 2, height / 2); canvas.rotate(mSecond * 6); canvas.drawLine(0, 0, 0, -radius + 20, mSecondHandPaint); canvas.restore(); // 刷新时间 postInvalidateDelayed(1000); } } ``` 在xml布局文件中添加MyClockView： ```xml <com.example.myapp.MyClockView android:layout_width="match_parent" android:layout_height="match_parent"/> ``` 运行效果如下图所示： ![image](https://user-images.githubusercontent.com/543384/136059427-20c4b3c3-e3c8-4e2d-b0d1-7e5bfc8b9d11.png)
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值