HTML画4个矩形,html5--5-4 绘制矩形
html5--5-4 绘制矩形
学习要点
掌握绘制矩形的方法:strkeRect()/fillRect()
掌握绘制路径的 beginPath()和closePath()
矩形的绘制方法
rect(x,y,w,h)创建一个矩形
strokeRect(x,y,w,hx,y,w,h) 绘制矩形(无填充)
fillRect(x,y,w,h) 绘制"被填充"的矩形
stroke() 绘制已定义的路径
Canvas的路径方法
moveTo() 定义绘制路径的起点(在直线中就是定义直线的起点)
lineTo() 添加一个新点,(在我们的直线案例中就是定义直线的终点,但是后边继续绘制的话,它就变成中间点)
stroke() 绘制已定义的路径
beginPath() 用来创建新的路径
closePath() 从当前点回到起始点的来封闭路径
绘制直线段流程:
在HTML5文档中添加canvas元素,并且设置的宽高和ID
在canvas元素中添加提示语句,让不支持canvas的浏览器能够显示友好的提示语句
添加script元素
获取画布/设置绘图绘图环境:此为固定语句,暂时记住、了解即可,后续课程还会继续讲解
指定线宽:lineWidth= 数值
指定颜色:strokeStyle=颜色值(只适用用轮廓,线段等,填充色用:fillStyle=颜色值
设定起点:moveTo(x坐标,y坐标)
设定终点:lineTo(x坐标,y坐标)
开始绘制:stroke()
绘制矩形流程:
在HTML5文档中添加canvas元素,并且设置的宽高和ID
在canvas元素中添加提示语句,让不支持canvas的浏览器能够显示友好的提示语句
添加script元素
获取画布/设置绘图绘图环境:此为固定语句,暂时记住、了解即可,后续课程还会继续讲解绘制空心矩形指定线宽:lineWidth= 数值
指定轮廓颜色:strokeStyle=颜色值(只适用用轮廓,线段等,填充色用:fillStyle=颜色值
设定矩形的基本参数:strokeRect(x,y;width,height)
绘制填充矩形
指定填充颜色:fillStyle=颜色值(只适用用轮廓,线段等,填充色用:fillStyle=颜色值
设定矩形的基本参数:fillRect(x,y;width,height)
实例
无标题文档Document
canvas{background: #A9A9A0}
您的浏览器暂不支持HTML5的canvas元素!!
//定义变量获取画布DOM
var canvas=document.getElementById("mycanvas");
//设置绘画环境为2d
var context=canvas.getContext("2d");
//设置线宽
context.lineWidth=10;
//设置颜色
context.strokeStyle="#FF0000";
//用moveto设置起点
context.moveTo(10,10);
//用lineTo设置终点
context.lineTo(100,100);
context.lineTo(100,200);
context.lineTo(200,200);
context.lineTo(300,100);
context.lineTo(10,10);
//开始画线
context.stroke();
context.beginPath();
context.lineWidth=5;
context.strokeStyle="#FFFF00";
context.rect(350,50,100,50);
context.stroke();
[HTML5 Canvas学习]绘制矩形
1.使用strokeRect和fillRect方法绘制矩形 a.strokeRect是绘制一个不填充的矩形 b.fillRect是绘制一个填充的矩形 代码:
HTML5 在canvas绘制一个矩形
笔者:本笃庆军 原文地址:http://blog.csdn.net/qingdujun/article/details/32930501 一.绘制矩形 canvas使用原点(0,0)在左上角的坐标系统 ...
html5 canvas绘制矩形和圆形
...
Html5 实现灯笼绘制
最近在学习Html5,就用JavaScript在Canvas试着绘制了一个灯笼,并作了简要的说明. 具体绘制思路在页面上有说明,不再赘述,代码如下:
什么是 Canvas? HTML5 的 canvas 元素使用 JavaScript 在网页上绘制图像. 画布是一个矩形区域,您可以控制其每一像素. canvas 拥有多种绘制路径.矩形.圆形.字符以 ...
opencv2 使用鼠标绘制矩形并截取和保存矩形区域图像
前言 好长时间没写博文了,今天偷偷懒写篇关于opencv2中鼠标响应操作的文章. 鼠标操作属于用户接口设计,以前一直使用Qt来做,但是如果只需要简单的鼠标,键盘操作,直接调用opencv库的函数也未尝 ...
随机推荐
httpclient4 文档翻译
前言超文本传输协议(HTTP)也许是当今互联网上使用的最重要的协议了.Web服务,有网络功能的设备和网络计算的发展,都持续扩展了HTTP协议的角色,超越了用户使用的Web浏览器范畴,同时,也增加了需要 ...
[转]使用 C 编写 Lua 模块
Lua 作为一种小巧的语言,一般都是嵌入到 C/C++ 中作为扩展语言,但是也可以作为独立的脚本语言使用,并且可以使用 C/C++ 编写扩展模块.在参考资料 [1] 中有怎样用 C/C++ 编写模块的 ...
aspcms常见问题解决方案
1.产品详细页读取多张产品图片(栏目类型:产品){aspcms:cimages count=16 contentid=[content:id]}
HTML画4个矩形,html5--5-4 绘制矩形相关推荐
- html5绘制矩形动画,HTML5 Canvas中绘制矩形实例
本文翻译自Steve Fulton & Jeff Fulton HTML5 Canvas, Chapter 2, "The Basic Rectangle Shape". ...
- HTML5 Canvas中绘制矩形
绘制矩形 上一节,我们使用lineTo()方法绘制一个封闭的矩形.其实,canvas的API提供了rect()方法可以绘制矩形.rect()方法是路径方法,它会把指定的矩形添加到当前路径的子路径中.它 ...
- [HTML5 Canvas学习]绘制矩形
1.使用strokeRect和fillRect方法绘制矩形 a.strokeRect是绘制一个不填充的矩形 b.fillRect是绘制一个填充的矩形 代码: <script>var can ...
- html画三个重叠的矩形,html5 实现两个矩形的叠加
Canvas Primer - Example: Drawing shadows window.addEventListener('load', function () { //得到canvas,并检 ...
- html绘制图形的关键三步,基于HTML5的绘图——绘制简单图形
绘制矩形 HTML5中实现绘制矩形的效果可以调用上下对象的三个函数fillRect().strokeRect()和clearRect().这些函数的语法格式如下所示: context.fillRect ...
- html5--5-4 绘制矩形
html5--5-4 绘制矩形 学习要点 掌握绘制矩形的方法:strkeRect()/fillRect() 掌握绘制路径的 beginPath()和closePath() 矩形的绘制方法 rect(x ...
- 画正圆角矩形 - HTML5 Canvas 作图
function DrawRoundRect(Canvas,P1,P2,Radius) 功能:画正圆角矩形 参数:P1:矩形左上角坐标:P2:矩形右下角坐标: Radius:圆角大小 源代码: fun ...
- html可以用坐标画svg图吗,HTML5如何使用SVG的方法示例
代码优化永远是程序员亘古不变的需求,而合理的利用SVG图片来代替部分PNG/JPG等格式的图片则是前端优化重要的一环,既然是优化,那我们先来看看SVG图片都有哪些优势: SVG 可被非常多的工具读取和 ...
- 矩形做成翻页的效果html5,HTML5 在canvas中绘制矩形附效果图
一.绘制矩形 canvas使用原点(0,0)在左上角的坐标系统,x坐标向右递增,y坐标向下递增. 使用绘图环境的矩形绘制函数来绘制矩形. fillRect(x,y,width,height) : 绘制 ...
最新文章
- 懒人神器 !一个创意十足的 Python 命令行工具
- python 中shape 1,n 与1的区别
- leetcode算法题--把数字翻译成字符串
- 学生党如何拿到阿里技术offer:《阿里面试(成功)》
- C++子类父类构造函数的关系
- 计算机二级考试都怎么考,计算机二级都考什么 怎么考
- 【ActiveMQ】消息生产者自动注入报错:Could not autowire. No beans of 'JmsMessagingTemplate' type found
- 第三:Pytest框架之命令行参数(一)
- 整篇文章翻译软件对接谷歌等各大翻译平台
- icp matlab,ICP算法MATLAB仿真
- 330pics-shell scripts-second
- 这世界无非是“人人为我,我为人人”
- 【d3.js实践教程01】d3基本操作
- 前端学习——Mobx
- 谷歌刚刚发布了2500万个免费数据集,快来了解一下
- 有一楼梯共M级,刚开始时你在第一级,若每次只能跨上一级或二级,要走上第M级,共有多少种走法?请编程实现。
- 【Python入门刷题】——字符串格式化输出-大写、小写化
- 麦语言和python区别_GitHub - bankwang/funcat: Funcat 将同花顺、通达信、文华财经麦语言等的公式写法移植到了 Python 中。...
- web版扫雷小游戏(一)
- 如何批量去水印?水印云批量去水印工具