<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=gb2312" />
<meta http-equiv="Content-Language" content="zh-cn" />
<title>画一个圆角图</title>
<script type="text/javascript" src="jquery-1.4.min.js"></script>
<script type="text/javascript"><!--
$(function(){
var elem = $("#myCanvas")[0];
if (!elem || !elem.getContext) {
return;
}
//CanvasRenderingContext2D
var ctx = elem.getContext('2d');
ctx.fillStyle = '#00f';
ctx.strokeStyle = '#0f0';
ctx.lineWidth = 10;
ctx.globalAlpha = 1;
//lineCap指定线条的末端如何绘制,round这个值指定了线段应该带有一个半圆形的线帽，半圆的直径等于线段的宽度，并且线段在端点之外扩展了线段宽度的一半。
ctx.lineCap = "round";
//lineJoin 属性说明如何绘制交点。值 "round" 说明定点的外边缘应该和一个填充的弧接合，这个弧的直径等于线段的宽度。"
ctx.lineJoin = "round";
ctx.beginPath();
ctx.moveTo(10, 10);
ctx.lineTo(200, 10);
ctx.lineTo(200, 200);
ctx.lineTo(10, 200);
ctx.lineTo(10, 10);
//ctx.fill();
ctx.stroke();
ctx.closePath();
});
// --></script>
</head>
<body>
<canvas id="myCanvas" width="300" height="300">您的浏览器不支持HTML5元素</canvas>
</body>
</html>
- 大小: 1.1 KB
分享到：
相关推荐
html5 canvas画布里面圆球弹跳动画效果代码 html5 canvas画布里面圆球弹跳动画效果代码
主要介绍了详解Html5 Canvas画线有毛边解决方法的相关资料,小编觉得挺不错的，现在分享给大家，也给大家做个参考。一起跟随小编过来看看吧
Android利用canvas画各种图形(点、直线、弧、圆、椭圆、文字、矩形、多边形、曲线、圆角矩形)
html5 canvas画布实现液体波浪动画效果 html5 canvas画布实现液体波浪动画效果
html5 canvas画布绘制圆形时钟代码
uni-app 利用canvas进行画框，移动框，放大缩小并删除，目前支持小程序,h5，其他没测试过
QML--Canvas画布实现矩形圆形等圈定
用HTML5 canvas画的幻灯片
html5 canvas绘画生成花朵动画代码 html5 canvas绘画生成花朵动画代码
android 使用canvas把矩形图片变成圆角矩形显示 参考网址：http://blog.csdn.net/rhljiayou/article/details/7212620
HTML5画板画图工具是一款可定义笔刷和画布的HTML5 Canvas画板画图工具。
NULL 博文链接：https://128kj.iteye.com/blog/2062673
canvas拼图游戏,基于html + canvas画布实现
本教程适合H5 Canvas绘图的初学者阅读，丰富的范例能让读者快速掌握H5 Canvas画布的基本使用方法，能创建简单的动画，能检测捕捉鼠标动作。
[For Dummies] HTML5 Canvas 画布开发 傻瓜书 (英文版)
登录后可直接操作 切换题目与答案画相应的框并拖动拉伸达到你所要的区域，还可以实时修改标题 运行环境 先运行npm install 再运行npm run dev 运行视频 链接: ...
但有时候在使用 canvas 绘图的时候，也需要圆角，例如需要将页面上某块区域导出为图片下载到本地的时候，常用的解决方法就是使用 canvas 将这块区域绘制出来，最后导出 canvas 即可，但是 canvas 没有直接提供圆角的...
主要介绍了使用HTML5 Canvas绘制圆角矩形及相关的一些应用举例,作者举了2048小游戏和微信对话框两个实用的例子来作为操作Canvas API的实用练习推荐,需要的朋友可以参考下
Canvas 中文名称叫“画布”，它是游戏中所有UI组件的“容器”。一个场景中，可以允许多个Canvas对象的存在，还允许Canvas之间可以进行“嵌套”使用。需要注意的是，场景中的任何一个UI对象，都肯定是某个Canvas对象...