Canvas基础知识
Canvas
创建canvas
<canvas id="canvas"></canvas>
一般都要存在ID
width和height建议直接在
<canvas>
中直接设定,不要使用css的方式去设定长和高,并且其是没有px单位的,因其也表示精度width和height还可以使用JS的方式进行设定,在Element对象中存在width和height属性,可以进行设定
获取Canvas对象
var canvas=document.getElementById("canvas");
var context= canvas.getContext();
context就是canvas对象,接下来都是对其进行操作
设置width和height
canvas.width = 1024;canvas.height = 768;
直线
context.strokeStyle="#005588";//设置颜色,red这种方式也是可以的
context.lineWidth=5;//线宽
context.moveTo(100,100);//表示画笔的起点坐标
context.lineTo(700,700);//表示下一笔的坐标
context.lineTo(1000,700);//表示下一笔的坐标
context.stroke();//绘制线条
多边形
context.fillStyle="rgb(2,100,30)";//颜色
context.moveTo(100,100);//表示画笔的起点坐标
context.lineTo(700,700);//表示下一笔的坐标
context.lineTo(1000,700);//表示下一笔的坐标
context.fill();
context.fillStyle="rgb(2,100,30)";//颜色
context.arc( x , y , RADIUS , 0 , 2*Math.PI,false )//画圆,参数依次:横坐标,纵坐标,半径,画圆起点,画圆终点,是否为顺时针方向画圆
context.fill();
fill()
会将颜色填充
开始和结束
context.fillStyle="rgb(2,100,30)";//颜色
context.moveTo(100,100);//表示画笔的起点坐标
context.lineTo(700,700);//表示下一笔的坐标
context.lineTo(1000,700);//表示下一笔的坐标
context.fill();
context.strokeStyle="#005588";//设置颜色,red这种方式也是可以的
context.lineWidth=5;//线宽
context.moveTo(100,100);//表示画笔的起点坐标
context.lineTo(700,700);//表示下一笔的坐标
context.lineTo(1000,700);//表示下一笔的坐标
context.stroke();//绘制线条
这代码显示的结果,其实不是我们想的那样,其实还是存在一些问题,因fill()上方的路径状态还是存在有效的,所以为了解决这个问题,引入了beginPath()
和closePath()
beginPath():开始路径,表示画笔状态的开始
closePath():结束路径,结束一个路径,如果路径不是封闭的,会将其变为封闭
清除
context.clearRect(0,0,1024, 768);
参数表示清除的坐标范围
Canvas基础知识相关推荐
- 好程序员分享24个canvas基础知识小结
好程序员分享24个canvas基础知识小结,非常全面详尽,推荐给大家. 现把canvas的知识点总结如下,以便随时查阅. 1.填充矩形 fillRect(x,y,width,height); 2.绘制 ...
- 好程序员分享24个canvas基础知识小结 1
好程序员分享24个canvas基础知识小结,非常全面详尽,推荐给大家. 现把canvas的知识点总结如下,以便随时查阅. 1.填充矩形 fillRect(x,y,width,height); 2.绘制 ...
- H5:画布Canvas基础知识讲解(三)之文字、阴影、颜色渐变
上一节介绍了H5:画布Canvas基础知识讲解(二)之插入图像.像素级操作,接下来继续讲解H5:画布Canvas基础. 文字 虽然最近的WebKit版本和Firefox 3.1 nightly bui ...
- Canvas基础知识1
基础内容 <canvas> 标签只有两个属性-- width和height(可选),默认值(width:300px,height:150px); 它们表示画布的实际宽度和高度,绘制的图形都 ...
- canvas - 基础知识 - 绘制剪纸图形
html代码: <!DOCTYPE html> <html><head><title>Sprite sheet</title><sty ...
- canvas基础-绘制矩形(1)
1.canvas基础知识 canvas元素是HTML5中新增的一个重要的元素,专门用来绘制图形,不过canvas本身不具备画图的能力,在页面中放置了canvas元素,就相当于在页面中放置了一块矩形的& ...
- 网页游戏开发基础——JavaScript基础知识
对于初学编程的朋友来说,这篇文章有点长,而且会有点难懂.但是请不要放弃,我尽量以通俗的语言解释相关的编程概念,这里只讲解编写一个游戏需要的相关编程概念(如需要会在后面的文章中随时补充相关概念),对其余 ...
- 《HTML5 CANVAS基础教程》读书笔记
一.HTML5简介 1.HTML5新特性 1)结构元素:section,header,hgroup,footer,nav,article,aside, 2)内容元素:figure,figcaption ...
- Html5 Canvas核心技术(图形,动画,游戏开发)--基础知识
基础知识 canvas 元素可以说是HTML5元素中最强大的一个,他真正的能力是通过canvas的context对象表现出来的.该环境对象可以从canvas元素身上获得. <body>&l ...
最新文章
- react中使用构建缓存_通过构建海滩度假胜地网站,了解如何使用React,Contentful和Netlify...
- 动态规划——最长上升子序列问题 两种角度及优化算法
- IntelliJ 中设置与Eclipse中 Ctrl+1 功能类似的快捷键
- 零基础python必背代码-零基础小白Python入门必看:通俗易懂,搞定深浅拷贝
- 人工智能与模式识别 --中国计算机学会推荐国际学术刊物
- Android中使用SeekBar拖动条实现改变图片透明度
- HDOJ树形DP专题之Centroid
- spring boot2 整合(二)JPA(特别完整!)
- oracle12密码大小写,oracle 11g 设置用户密码大小写敏感测试
- 获取Element UI中button组件的ID值
- PowerVim - 强大的vim配置
- 创建一个vue-cli项目
- [Ruby] 类和容器
- linux操作系统安装教程图解【图文教程】
- 在Excel中批量生成条形码
- Canonical标签怎么使用,Canonical标签有什么作用?
- 面向对象技术之——转发(forwarding)
- word删除分页符的两种方法
- JAVA毕业设计健身房信息管理系统计算机源码+lw文档+系统+调试部署+数据库
- cesium使用primitives加载模型数据,点击事件
热门文章
- 一次SQL查询优化原理分析(900W+数据,从17s到300ms)
- Spring Boot Admin 2.1.0 全攻略
- 老黄狂拼CPU!英伟达掏出800亿晶体管显卡,外加世界最快AI超算Eos
- Transformer深至1000层还能稳定训练,微软实习生一作,LSTM之父转发
- 苹果M1 Max芯片发布:570亿晶体管,图形性能堪比RTX 3080
- CV十年发展之观察:1.5万篇论文透视「业界」与「学界」,到底谁更胜一筹?...
- 开发者被要求向破解者道歉,竟揪出“阿里云假员工”,网友:这人有前科
- 30 个Python代码实现的常用功能,精心整理版
- Linux内核网络栈1.2.13-icmp.c概述
- ospf的四种网络类型