html5canvas基础

最新推荐文章于 2023-08-03 08:24:58 发布

你真好看l

最新推荐文章于 2023-08-03 08:24:58 发布

阅读量328

点赞数

分类专栏： html5

本文链接：https://blog.csdn.net/qq_40052011/article/details/106793294

版权

文章目录

canvas基础

1.什么是canvas
h5新增元素，可通过js中的脚本来绘制图形
使用标签来定义一个canvas元素，使用这个标签时建议成对出现，不要使用闭合形式（考虑兼容）
canvas默认具有宽高width:300px;height:150px;
2.替换内容
标签中提供替换内容，不支持canvas的浏览器就会显示内容，而支持canvas标签的浏览器就会忽略标签中的内容
3.标签只有两个属性：width 和height（canvas默认具有宽高width:300px;height:150px;）
画布的高宽：
html中设置height,width只影响画布本身、不影响画布内容
css里设置不但会影响画布本身高宽,还会使画布中内容等比例缩放
4.渲染上下文
元素只是创造了一个固定大小的画布，要想画内容，需要用js,首先找到他的渲染上下文（用元素的getContext()的方法，它只有一个参数，上下文的格式）
-----获取方式：
var canvas = document.getElementById(“box”)
var ctx = canvas.getContext(“2d”)
-----检查支持性
var canvas = document.getElementById(“box1”)
if(canvas.getContext){
var ctx = canvas.getContext(“2d”)
}

canvas画矩形

canvas只支持原生的图形绘制，所有其他图形绘制都需要生成一条路径
1找到 canvas 元素:
var c=document.getElementById(“myCanvas”);
2创建 context 对象：
var ctx=c.getContext(“2d”);
getContext(“2d”) 对象是内建的 HTML5 对象，拥有多种绘制路径、矩形、圆形、字符以及添加图像的方法。
3.画矩形： //不加单位
ctx.fillRect(0,0,20,20);
fillRect(x,y,width,height) 方法定义了矩形当前的填充方式。
4.带边框的矩形：
ctx.strokeRect(20,20,20,20) //边框会渲染到19.5和20.5之间（按理说边框是1px但是canvas渲染时边框宽度是评分到两侧的）（浏览器是不会让一个像素只用自己一半的，所以相当于边框会渲染到9和11之间）
5.添加样式和颜色
ctx.fillStyle="#FF0000"; //设置填充样式属性可以是CSS颜色，渐变，或图案。fillStyle、strokeStyle 默认设置是#000000（黑色）。
ctx.strokeStyle = “blue” //设置边框样式
ctx.lineWidth = 10 //绘制的线的粗细，必须是正数，不加单位（线会往外扩，覆盖渲染）
6.ctx.lineJoin = “round”(圆角)||“bevel”（斜角）||“miter”（直角，默认）
设定线条与线条间接合的方式 (边框)

	<style type="text/css">
			*{
   
				padding: 0;
				margin: 0;
			}
			html,body{
   
				height: 100%;
				overflow: hidden;
			}
			body{
   
				background-color: #808080;
			}
			#test{
   
				background-color: indianred;
				position: absolute;
				left: 0;
				right: 0;
				bottom: 0;
				top: 0;
				margin: auto;
			}
			
		</style>
	</head>
	<body>
		
		<canvas id="test" width="" height=""></canvas>
		<script type="text/javascript">
			window.onload=function(){
   
				var test=document.querySelector("#test")
				var ctx = test.getContext(

最低0.47元/天解锁文章

你真好看l

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
html5canvas基础

文章目录canvas基础canvas画矩形canvas绘制三角形save& restorecanvas基础1.什么是canvash5新增元素，可通过js中的脚本来绘制图形使用标签来定义一个canvas元素，使用这个标签时建议成对出现，不要使用闭合形式（考虑兼容）canvas默认具有宽高width:300px;height:150px;2.替换内容标签中提供替换内容，不支持canvas的浏览器就会显示内容，而支持canvas标签的浏览器就会忽略标签中的内容3.标签只有两个属性：widt
复制链接

扫一扫