学习Canvas绘图与动画基础 绘制直线（二）
1 <!DOCTYPE html>
2 <html>
3 <head lang="en">
4 <meta charset="UTF-8">
5 <title>绘制直线</title>
6 </head>
7 <body>
8 <canvas id="canvas" style="border:1px solid #aaa; display:block;margin:30px auto;">
9 当前浏览器不支持Canvas,请更换浏览器
10 </canvas>
11 <script>
12 var canvas=document.getElementById('canvas');
13 canvas.width=1024;
14 canvas.height=768;//也可以在这里设置width和height
15 var context=canvas.getContext('2d');
16 //使用context进行绘制
17
18 context.moveTo(100,100);
19 context.lineTo(700,700);
20 context.lineTo(100,700);
21 context.lineTo(100,100);
22 context.lineWidth=5;
23 context.strokeStyle="#005588";
24 context.stroke();
25 </script>
26 <!--
27 1.context.moveTo(100,100);和context.lineTo(700,700);//状态设置
28 2.context.stroke();//绘制
29 3.context.lineWidth=5;//设置线条的宽度
30 4.context.strokeStyle="#005588";//线条样式，主要指颜色
31 -->
32 </body>
33 </html>
学习Canvas绘图与动画基础 绘制直线（二）的更多相关文章
- 学习Canvas绘图与动画基础 绘制多条路径（四）
1 <!DOCTYPE html> 2 <html> 3 <head lang="en"> 4 <meta charset="U ...
- 学习Canvas绘图与动画基础 制作弧和圆（五）
1 <!DOCTYPE html> 2 <html> 3 <head lang="en"> 4 <meta charset="U ...
- 学习Canvas绘图与动画基础 为多边形着色（三）
1 <!DOCTYPE html> 2 <html> 3 <head lang="en"> 4 <meta charset="U ...
- 学习Canvas绘图与动画基础 canvas入门（一）
一.创建canvas 1 <!DOCTYPE html> 2 <html> 3 <head lang="en"> 4 <meta char ...
- canvas-炫丽的倒计时效果Canvas绘图与动画基础
canvas 是基于转台来绘制的 来了解一下canvas的浏览器兼容性问题,如下图所示.(截图自can i use) tips:刚刚拿去ie8下测了一下,什么反应都没有,提前设定好的,如果该浏览器不支 ...
- 炫丽的倒计时效果Canvas绘图与动画基础
前言 想要在自己做的网页中,加入canvas动画效果,但是发现模板各种调整不好,觉得还是要对canvas有所了解,才可以让自己的网页变得狂拽炫酷吊炸天! 一.绘制基础 1 <!DOCTYPE h ...
- 【HTML5】炫丽的时钟效果Canvas绘图与动画基础练习
源自慕课网 效果如下: 全部代码: <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" " ...
- >炫酷的计时器效果Canvas绘图与动画<
>炫丽的计时器效果Canvas绘图与动画< 虽然我是学习java的,但是因为最近使用html5的关系,多学习了一下前端知识. 现在,我要介绍的计时器是十分炫酷的,使用画布完成. 喜欢htm ...
- WPF学习之绘图和动画
如今的软件市场,竞争已经进入白热化阶段,功能强.运算快.界面友好.Bug少.价格低都已经成为了必备条件.这还不算完,随着计算机的多媒体功能越来越强,软件的界面是否色彩亮丽.是否能通过动画.3D等效果是 ...
随机推荐
- AtCoder Beginner Contest 186
A Brick int n, m; int main() { scanf("%d%d", &n, &m); printf("%d\n", n / ...
- reverseLinkedList(翻转链表)
ReverseLinkedList(翻转链表) 链表是一种物理存储单元上非连续.非顺序的存储结构,数据元素的逻辑顺序是通过链表中的指针链接次序实现的.非连续.非顺序指的是,通过指针把一组零散的内存块串 ...
- SetWindowsHookEx 消息钩取进程卡死
<逆向工程核心原理> windows消息钩取部分的例子在win10下卡死,失败.通过搜索发现,要保证钩取的进程与注入的dll要保持cpu平台相同 SetWindowsHookEx可用于将d ...
- KVM虚拟化配置
KVM虚拟化 虚拟化概念 KVM虚拟化概念详讲 虚拟化配置 首先开启虚拟化的支持 并且增加一个50g的硬盘 free查看内存 grep -Ei 'vmx|svm' /proc/cpuinfo查看虚拟机 ...
- springboot的拦截器报错plicationFilterChain.java:193) ~[tomcat-embed-core-9.0.36.jar:9.0.36]
解决方案: spingboot的拦截器"index.html"少"/",太粗心了
- Python面向对象练习题
1.模拟栈操作原理 先进后出 1.初始化(创建一个存储数据的列表) 2.进栈使用列表保存数据 3.出栈 使用列表删除数据 4.查看栈顶元素 切片获取列表最后一位数据 5.判断是否为空栈 6 ...
- CMD控制台(命令提示符)的打开方式
打开CMD的方式 打开+系统+命令提示符 Win键 +R 输入cmd 打开控制台(推荐使用) 在任意的文件夹下面,按住shift键+鼠标右键点击+在此处打开命令行窗口 资源管理器的地址栏前面加上cmd ...
- Java（114-132）【Scanner类、Random类、ArrayList类】
1.API概述和使用步骤 应用程序编程接口.Java的API是一本程序员的字典,学会查询 2.Scanner 概述及其API文档 键盘输入 类都是大写的Scanner,关键字是小写的public 3. ...
- redis的持久化有哪几种方式？不同的持久化机制都有什么优缺点？（偏难）
1.RDB和AOF两种持久化机制的介绍 RDB持久化机制,对redis中的数据执行周期性的持久化 AOF机制对每条写入命令作为日志,以append-only的模式写入一个日志文件中,在redis重启的 ...
- Android+Spring Boot 选择+上传+下载文件
2021.02.03更新 1 概述 前端Android,上传与下载文件,使用OkHttp处理请求,后端使用Spring Boot,处理Android发送来的上传与下载请求.这个其实不难,就是特别多奇奇 ...