HTML5 Canvas画简单图形

twlkyao

于 2013-05-04 21:22:33 发布

阅读量2k

点赞数

分类专栏： HTML5 文章标签： HTML5 Canvas 图形

本文链接：https://blog.csdn.net/twlkyao/article/details/8885097

版权

最近开始重新拾起HTML5的东西，这里把简单的图形的画法总结一下（参考韩顺平老师的视频，讲的很不错）

<!--告诉浏览器，这是HTML5网页-->
<!DOCTYPE HTML>
<html>
<!---->
<head>
<!--网页编码采用gbk2312-->
<meta = charset = "gbk2312"/>
<!--网页标题-->
<title>
HTML5 Canvas 测试
</title>
</head>
<body>
HTML5 Canvas
<br>
<img id="image" src="image.jpg"/>
<br>
<!--画布-->
<canvas id = "can1" width = "1000px" height = "600px" style = "border:1px solid red">
</canvas>
<!--定义客户端脚本-->
<script type = "text/javascript">
//1.得到画布
var canvas1 = document.getElementById("can1");
//2.得到上下文引用，可以理解为画笔
var context = canvas1.getContext("2d");


//画直线
//moveTo设置起点的位置
context.moveTo(20

最低0.47元/天解锁文章

twlkyao

关注

0
点赞
踩
3

收藏

觉得还不错? 一键收藏
1
评论
HTML5 Canvas画简单图形

最近开始重新拾起HTML5的东西，这里把简单的图形的画法总结一下（参考韩顺平老师的视频，讲的很不错）HTML5 Canvas 测试HTML5 Canvas//1.得到画布var canvas1 = document.getElementById("can1");//2.得到上下文引用，可以理解为画笔var context = canvas1
复制链接

扫一扫

专栏目录